From the three-column adaptive width layout to the css layout, adaptive css

From the three-column adaptive width layout to the css layout, adaptive css

How can we achieve a three-bar Adaptive Layout with PX on the left and right, and the center is adaptive with the browser width?

The first thought is to useTable Layout, Set the table width to 100%, three td, 1st and 3rd fixed width to PX, then the middle one will be adaptive. Below is a real-time demo:

Left

Middle

Right

However, table layout is not recommended. table layout is the layout used before css is popular. It has many disadvantages: before the table is loaded, the entire table is blank, the combination of data and typographical parameters makes the page messy, and it is very troublesome and difficult to modify the table layout.

If you do not need table layout, the second method isFloat, Let the left div float left and the right div float right, as shown in the following side:

Action 1 first let the left and right divs float

Float left float right

There is also a div in the middle, if the middle div is placed in the second:

<div style="float:left;">left</div><div>middle</div><div style="float:right;">right</div>

The effect is as follows:

The div on the right of Action 2 floats to the second line.

Left middle right

The default display of div is block. If width is not set, block-level elements occupy as much horizontal space as possible. If width: 200px is set, the result is as follows:

The div on the right of Action 3 still floats to the second line.

Float left middle right

The third div will still wrap the line, because float right will be placed on the right of the current row as far as possible, that is, the edge of its container box or the element of the last float, if there is no space for the current row, it will continue to move down until there is enough space. Because the middle is a block box, even if the width is set, the space of the current row will be occupied, so right can only have space in the next row.

At the same time, it is noted that although the middle is set to PX, it looks px wide like left. This is because although float elements are in the normal Document Stream, they only arrange the content of adjacent (non-float) elements around it, it still occupies the background and border space of adjacent elements. If you add a white border to middle, it looks like this:

Action 4 floating elements occupy the background and edge space of the corresponding elements in the document flow

Float left middle right

Obviously, the float left elements occupy the space of the middle background and border, and the content of the middle is arranged around the left. It is important to understand this.

Suppose there is a p tag in the middle, and the content of the p tag is relatively long, the effect is as follows:

Action 5 floating surround Effect

Float left middle

Once the surrounding element exceeds the float element height, it is displayed in the normal width.

Float right

As mentioned above, in the row of the float element, the width of the content of adjacent elements is reduced to adapt to the width occupied by the float element. Once the float element area is exceeded, the display width of adjacent elements is normal.

Because the default div occupies one row, you cannot place the middle in the second div. You must place it in the third div. Change the order of the second and third div:

<div style="float:left;">left</div><div style="float:right;">right</div><div>middle</div>

Let's render the div of float right first, and then render the div of middle. Because after left is rendered, the left row still has space, because after float left, it only occupies the background and border of the current row, while the current row still has a lot of space, so when the right is rendered in the second step, the line is the same as the left line. effect:

Action 6 first renders the left and right divs, and then renders the middle Divs.

Left right middle

If the width of the middle is not set, the middle is surrounded by left and right. Like left, right also occupies the space of the middle.

The div in the middle of Action 7 is surrounded by the left and right divs.

Left right ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ Middle is surrounded by left and right, while left and right occupy the space of middle ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

To have a margin value in the middle of the middle and left/right, set the left and right margin values of the middle to 110px, so that the distance between the left and right is 10 Px:

Action 8 sets the margin value of the intermediate div to 100px + 10px.

Left right middle set margin: 0 110px;

The advantage of this method is its simplicity and support.

The principle of this adaptive width is to take advantage of the float's surrounding characteristics and occupy the background/border position of the natural Document Stream. This feature affects not only the content of the current row, but also the content of the next row, as described below:

<P> content of the first section, omitted Float: left;"> </Img> </p> <p> content in section 2, omitted </p>

Action 8 float occupies the space of the next row

The float attribute of the first section surrounding the picture arrangement also affects the second section. That is to say, float occupies the background and border of the element at the corresponding position of the natural text stream, even if it is not in the same line as the float element.

 

There is alsoMargin negative value method. The margin negative value method is as follows: the first step is to make the middle of the middle 100% of the width, while the content of the middle is set to PX, so that the middle center adaptive width is achieved:

<div style="width:100%;">      <div style="margin: 0 100px;">middle</div></div>

Middle

Next, set the margin-left value of left to-100%. Because the ratio is relative to the size of the browser window, if left and middle are in the same row, left to the far left of the middle. However, because the container box of the middle is a common div that occupies a whole row, left will be arranged in the next row. At this time, when the margin-left is set to a negative number, the screen will be displayed. So let the middle float, left will be ranked to the leftmost of the first row, and the middle will be covered above:

<div style="width:100%; float:left;">      <div style="margin: 0 100px;">middle</div></div><div style="margin-left: 0">left</div>

Middleleft

We can see from the above: this implementation will cause the left content to be squeezed out of the target area, because as mentioned above, middle occupies the left background space, and the above situation is that it is full, left content can only be overflow. So there is a problem with this implementation, so we have to make left float to the left, so left is next to the middle, because the middle occupies 100% of the width, so when left is given to the left margin-100%, left is on the far left.

<div style="width:100%; float:left;">      <div style="margin: 0 100px;">middle</div></div><div style="float: left; margin-left: -100%;">left</div>

Middleleft

Note that, although left float seems to be exclusive to the next row, it is different from the default div exclusive line. The left after float is still the same row as the middle, because when space is insufficient, float only makes the space of the current row box large, it is the same as a div block box that contains many row-level boxes whose display is inline-block. For example:

<Style> button {width: 150px ;}</style> <div style = "width: 300px; "> <button> button 1 </button> <button> button 2 </button> <button style =" margin-left:-200px; "> button 3 </button> </div>

When button 3 is set to a large negative value of margin-left, it does not go out of the screen, but is located in the same row with the other two buttons, as shown below:

Button 1 Button 2 Button 3

Note: The element with float settings does not change display to inline-block. Most of the css computing values of display are changed to block, and the original display: flex is not changed:

Value	Calculated value
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex,floatHas no effect on such elements
inline-flex	inline-flex,floatHas no effect on such elements
Other	Unchanged

From MDN

As shown in the preceding table, after float: left/right is set for a span, you do not need to set it to display: block/inline-block. You can directly set the width and height.

Back to the question, the left div is set to margin-left:-100% and then runs to the left. right is also the same principle. Set the right margin-left to-100px accordingly, go to the rightmost:

<div style="width:100%; float:left;">      <div style="margin: 0 100px;">middle</div></div><div style="margin-left: -100%;">left</div><div style="margin-right: -100px;">right</div>

Action 9 margin negative value method

Middleleftright

 

The third method is discussed below,Use display: table-cell

Because table display is adaptive, set the display attribute of the middle that requires adaptive width to table-cell.

<div style="float:left;">left</div><div style="float:right;">right</div><div style="display:table-cell;">middle</div>

The effect is as follows:

Leftrightmiddle

It is found that the table-cell width is adaptive Based on the content. here we need to adapt according to the browser window, so we can add a large width to the middle, for example, width: 2000px:

Action 10 make the div in the middle use the table-cell adaptive width leftrightmiddle

Because ie6/7 does not support display: table-cell, to support ie6/7, you must use the display: inline-block. The inline-block of ie6/7 is different from the standard, it is used to trigger the hasLayout feature so that elements have layout attributes. The element used in the row can make the width setting take effect. If the element is used in the block element, it only triggers the layout feature and is set to inline to be the block element in the row, if you do not set inline, the result is similar to that of table-cell. The difference is that the width: 2000px is set, which leads to a line break when it is too long. Therefore, you must use the hack of ie6/7 and Set * width: auto to change the width value again:

<Style>. middle {display: table-cell; * display: inline-block;/* _ and * start with ie6/7. */width: 2000px; * width: auto ;} </style> <div style = "float: left;"> left </div> <div style = "float: right; "> right </div> <div class =" middle "> middle </div>

However, I believe that for the sake of the internet, we should not be compatible with ie6/7, or even ie8.

 

Next, proceed to the fourth method,Use flex Layout, Very simple: you only need to set the container to display: flex, and then set flex-grow of middle to 1:

<Section style = "display: flex;"> </section> <div> left </div> <! -- The width is 100, omitted --> <div style = "flex-grow: 1;"> middle </div> <div> right </div>

Action 11 use flex-grow adaptive width

Leftmiddle flex-grow: 1 right

Flex-grow: 1 is used to set the width of the middle to the remaining width of the flex container, so as to achieve adaptive purposes. The use of flex is not fully described. For details, see CSS-Tricks: A Complete Guide to Flexbox.

However, the support for flex layout ie is poor. For details, refer to caniuse.

 

Finally, we analyze another adaptive example. The width of an element must be adaptive according to the width of other elements. As shown in, the number of digits in the ranking may change greatly, resulting in adaptive text on the rightmost side:

According to the above analysis, this example is not difficult to implement. The text width in the p label can be adaptive as follows:

<Div style = "width: 320px;"> <span style = "width: 14px;Float: left;"> Ranking </span> <span style =" font-size: 40px;Float: left;"> 89 </span>
Float: left;"Src ="... "> </img> <p> your friends program silver pig to rank 89 in the trench list </p> </div>

Actual results:

Ranking 1 the silver pig that your friends program will rank 1 in the trench list

6783 your friends will program the silver pig in the trench rankings ranking 6783

 

 

Float is the easiest way to use. You can also try to use the flex layout, mainly using the flex-shrink attribute. The function of flex-shrink is to define the shrinkage ratio, when the width of the sub-element in the container exceeds the width of the container, the width of the sub-element is scaled in proportion to the width of the container. Set flex-shrink of the first three span/img to 0, and flex-shrink of p to 1, so that the overflow width is subtracted from the p tag, the p label width is adaptive.

<Style> span, img {Flex-shrink: 0;} P {Flex-shrink: 1;} </Style> <div style = "display: flex; width: 320px;"> <span style = "width: 14px; "> ranking </span> <span style =" font-size: 40px; line-height: 45px; "> 89 </span>  </img> <p> your friends program silver pig to rank 89 in the trench list </p> </div>

Real-time effect:

89 your friends will program silver pig in the top 89

1890 your friends will program the silver pig in the trench rankings ranking 1890

 

 

The preceding section comprehensively analyzes the most primitive table layout, namely, float layout, table-cell, margin negative value method, and flex layout to achieve adaptive width implementation and principles, focuses on some features of float. If an error occurs in the above analysis, please correct it.

 

Refer:

1. CSS Float Theory: Things You shoshould Know

2. CSS Tricks: All About Floats

3. CSS-Tricks: display

4. Understanding Floats

5. Visual formatting Model