Adaptive Layout of two columns and Adaptive Layout of two columns

Adaptive Layout of two columns and Adaptive Layout of two columns

You can use a search engine to search for "Adaptive Layout of two columns". There are many implementation methods. This article focuses on the underlying logic of these methods and how they come from them.

Analysis:

Three requirements must be met:

① Two boxes are in the same line

② The box on the right needs to fill the remaining space

③ The two boxes cannot overlap

The three conditions have many implementation methods respectively (without considering absolute positioning ):

There are many implementation methods in combination.

Method:

<div class="left"></div><div class="main"></div>

1. float + block + margin:

.left {    float: left;    width: 100px;}.main {    margin-left: 110px;    width: 100%;}

Disadvantage: If you want to modify the width of. left, you also need to modify the margin-left of. main.

 

2. float + BFC:

. Left {float: left; margin-right: 10px; width: 100px;}. main {overflow: hidden; // or overflow: auto}

Advantage: You can set floating margin to control the spacing. to modify the width, you only need to modify the width.

 

Add conditions:

If you need to render important content first, that is, the HTML structure should be:

<div class="main"></div><div class="left"></div>

In this case, the width of the first box must be 100%, because if you want to walk in the same line, it can only be float or display: inline-block (not absolute positioning ), you need to set width: 100% for both States to achieve self-adaptation.

• Floating:

If. if you set float for main, you need to set it according to the floating stream principle. and. left has the same width or more gaps. left to the above line, if you want to make. left. the left line of main must be produced. main itself is equal to the gap, so you need to give. left: Set margin-left:-100%;

At this time,. left is stacked on. main. If. main sets margin-left: 100px ,. left will still be stacked in. main, because at this time. the width of main is reduced ,. the negative margin of left is also reduced, so no matter whether it is given. the value of margin-left in main is set to a large value ,. left will always overwrite it.

Therefore, if you want to use float + margin to keep them from overlapping, you can add another box and set margin for it. That is:

<div class="main">    <div class="main-content"></div></div><div class="left"></div>

. Left {margin-left:-100%; height: 400px; display: inline-block;/* or float: left; */width: 100px ;}. main {float: left; width: 100% ;}. main-content {margin-left: 110px ;}

In addition, there are two remaining paths: float + BFC and position: relative.

First look at float + BFC ,. main is float, but it is completely covered by the floating stream behind it, so he cannot act as the "float". Obviously, he cannot do the BFC either, therefore, this road cannot be achieved.

Then let's look at position: relative. Let the. main right shift the left position, and then pull it out with relative, that is:

. Left {margin-left:-100%; position: relative; left:-110px; display: inline-block;/* or float: left */width: 100px ;}. main {margin-left: 110px; float: left; width: 100% ;}

 

• Display: inline-block;

If you want to make. main display: inline-block, you must leave a gap greater than the. left width in the current row box, and let the. left floating, they can go to a row.

To shorten the current row box, you can. set the negative margin on the left or right side of main. This will have a side effect, that is, it will make. main moves to the left or right. Therefore, you can only set the negative margin on the left.

After a row. main will cover. left, because in the same stack context, inline-block will be on the top of the float, so you need. left: Set position: relative to display it.

Because. main has set a negative margin-left, it is impossible to give space to. left. The path of position: relative cannot be taken. Float + BFC obviously does not work.

So there is only one method:

<div class="main">    <div class="main-content"></div></div><div class="left">/div>

.left {    float: left;    position: relative;    width: 100px;}.main {     display: inline-block;     margin-left: -100px;    width: 100%;}.main-content {    margin-left: 110px;}

 

Summary:

Starting from the problem and combining the basic knowledge points, the following five implementation methods can be obtained:

If important content is not required to be rendered first, you can use:

1. float + margin

2. float + BFC

If important content is required to be rendered first, you can:

1. float + relative

2. float + new box

3. inline-block + new box

In addition, there is also flexbox of CSS3, which has the disadvantage of being incompatible with low-level browsers and having some bugs.

Each method has its own advantages and disadvantages, and there is no absolute good or bad. You need to decide which method to use based on specific requirements.