Home > Developer > Web Develop
In the page layout, previously only two columns, three columns of layout, but not too much to consider in two columns, three columns of the layout of the situation to achieve some adaptive situation; Today, here's a question, mark.
Method One: The left element floats or absolutely locates the way out of the document flow, so that two block-level elements can be displayed on the same line. The value of the Margin-left is then set to the width of the left element, where a default rule for the div is used, the width of the parent element is inherited by the div without setting the width, and if other tags such as p do not reach the effect;<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Untitled Document</title></Head><styletype= "Text/css">. Box1{float: Left;width:300px;Height:150px;background:Red;}. Box2{Margin-left:300px;background:Blue;Height:150px;}</style><Body><Divclass= "Box1"></Div><Divclass= "Box2"></Div></Body></HTML>
：
Method Two: The use of BFC (block-level formatting context) to prevent the principle of mosquito surround to achieve; BFC is a relatively independent layout environment, the layout of its internal elements is not affected by the outside layout, It can be created in a number of ways: 1.float is not none;2.position not static or Relative;3.display is Table-cell,table-caption,inline-block,flex or Inline-flex 4.overflow is not visible; In the case of BFC, the left outer border of each box is immediately adjacent to the left bounding box of the containing block (right-to-left formatting is immediately bfc,w3c). This is true even in floats (although the bounding rectangle of a containing block shrinks due to a float), unless the inside of the containing block creates a new BFC. Thus, when we create a BFC for the element on the right, it will not cling to the left border of the containing block, but to the right of the left frame;
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Untitled Document</title></Head><styletype= "Text/css">. Box1{float: Left;width:300px;Height:150px;background:Red;}. Box2{background:Yellow;Height:150px;Overflow:Auto;}</style><Body><Divclass= "Box1"></Div><Divclass= "Box2"></Div></Body></HTML>
Effect:
Note: In the test process encountered a problem, remove box2 overflow:auto; attributes, the right div can also achieve the adaptive effect. Whether the adaptive box needs to be confirmed in the setup BFC; method three: Use display:table; the parent element is set display:table; width 100%, left and right box set Display:table-cell; The Left fixed box is set wide, and the right self-adapting box sets the height;<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Untitled Document</title></Head><styletype= "Text/css">. Box{Display:Table;width:100%;}. Box1{width:300px;Height:150px;background:Red;Display:Table-cell;}. Box2{background:Green;Height:150px;Display:Table-cell;}</style><Body><Divclass= "box"><Divclass= "Box1"></Div><Divclass= "Box2"></Div></Div></Body></HTML>
Effect:
Page layout-left fixed, right adaptive
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
