How to Use CSS to implement a left-side fixed-width, right-side Adaptive Layout of two columns, css two columns

How to Use CSS to implement a left-side fixed-width, right-side Adaptive Layout of two columns, css two columns

I recently saw a question in the Baidu IFE training camp:

Two different methods are used to implement a layout of two columns. The width of the left part is fixed, and the width of the right part changes with the browser width.

I personally summarized the following three Implementation ideas:

See the Pen absolute-two-column by xal821792703 (@ honoka) on CodePen.

Note the following:

• • A "positioned" parent element is required.
  • Div-a is absolutely positioned and adjusted to the upper left corner of the browser
  • The property value of div-B margin-left is the width of div-a (because div-a is definitely located out of the Document Stream, if it is not set to div-a width, it will overwrite each other)
  • Div-c is absolutely positioned and the position is adjusted to the bottom
  • The div to be adaptive is set to 100% in width.

2. Floating implementation

See the Pen float-two-column by xal821792703 (@ honoka) on CodePen.

Note the following:

• • Div-a is set to left floating
  • Div-B is the same as above. You need to set the value of the margin-left attribute to the width of div-a. The reason is the same as above. Floating will also be out of the document flow.
  • It is best to clear the floating in div-c to avoid the floating effect.

3. Implemented through BFC rules

See the Pen bfc-two-column by xal821792703 (@ honoka) on CodePen.

Here, we will not spend a lot of time introducing BFC. You can refer to the following two blog posts:

In-depth understanding of BFC and Margin Collapse
BFC in CSS

In short, BFC can help us solve the problem that the left margin of the element on the right will touch the left outer border of the block container after the element on the left is detached from the document stream in the layout, just like:

Now, you only need to set div-B to a BFC element.

The above is my personal summary of the three two-column layout method, welcome to exchange.

In addition, if you are interested in the Baidu IFE front-end training camp, please refer to my repo (Laugh)