CSS two-column layout based on BFC rules (code example)

The content of this article is about the CSS two-column layout (code example) based on BFC rules. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are many ways to implement common adaptive two-column layout in css.

What we are talking about here is to achieve this by forming a new BFC when overflow is not set to visible. As for what BFC is, you can search it first, it’s basically covered. When I have more free time, I will talk about BFC and examples. That's it, enter the code:

       
   
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quis error ea veniam animi quibusdam, nobis repudiandae consectetur sed? Minus architecto cumque perspiciatis saepe rerum non dolorum voluptates similique, consequuntur.
 
right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）
 
  

Pay attention to the longest line in the code (line 37). The text here is not in English, but in Latin. Of course, it is not so much typed by my hand. . Let me share with you, during testing, if you want to input something but don’t know what to input, and it looks ugly, you can be lazy. Enter lorem and press the tab key. Except for the first sentence, which is fixed, the following sentences are randomly generated. The premise is that your editor is equipped with the emmit plug-in. Hbuilder and vscode are built-in and available directly. Submit text requires the plug-in to be installed. Notepad will definitely not work. I have personally tested these. It’s a little bit of fun! The other comments are almost written. The code is originally very simple, but for these things, CSS requires more hands-on experience to try and implement it. That’s it for this time’s essay. When I’m busy, the quality may not be very good, but now I’m starting to stick to writing something.

Also, the left side is fixed and the right side is adaptive. The right side is fixed and the left side is adaptive. I believe you can handle it easily. These are all trivial matters. I’ll remind you if I think of it. This two-column adaptation does not mean that both columns are adaptive.

【Related recommendations:CSS video tutorial】

The above is the detailed content of CSS two-column layout based on BFC rules (code example). For more information, please follow other related articles on the PHP Chinese website!