Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve the two-column layout of css based on BFC rules. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Using BFC rules to realize two-column layout

* {

Margin:0

Padding:0

}

.contain {

Width:100%

Height:100%

Background:grey

Color:#fff

}

.contain.left {

Float:left

/ * margin-right:20px;*/

Width:200px

Height:100%

Word-wrap:break-word;/* is used for pure numbers and automatic line wrapping when it is exceeded in English * /

Background:blue

}

.contain.right {

Height:100%

Overflow:hidden;/* makes right a BFC*/.

Word-wrap:break-word;/* is used for pure numbers and automatic line wrapping when it is exceeded in English * /

Background:darkblue

}

Loremipsumdolorsitamet,consecteturadipisicingelit.Officiaquiserroreaveniamanimiquibusdam,nobisrepudiandaeconsectetursed?Minusarchitectocumqueperspiciatissaepererumnondolorumvoluptatessimilique,consequuntur.

The overflow:hidden here in right does not mean to be truncated beyond the contents of the container and will not be displayed. Instead, it makes use of the BFC rule (a BFC is created when overflow is not visible).

Notice the longest line in the code (line 37). The text here is not English, it's Latin, and certainly not so much typed by my hands. Share with you, in the test, want to enter some content but do not know what to enter, strange ugly, you can be lazy. Type lorem, and then tab it out, except for the sentences that are fixed in the first sentence and random in the following paragraph. The premise is that your editor is equipped with the emmit plug-in, Hbuilder,vscode has built-in, directly available, submittext needs to install the plug-in. Notepad must not work, these are my own tests. It can be regarded as a little practical information. For the rest, the comments are almost written, and the original code is also very simple. Css needs to try and implement these things on its own. This is the end of the essay, the quality may not be very good when busy, but now start to insist on writing something.

In addition, this is fixed on the left and adaptive on the right. Fixed on the right, adaptive on the left, I believe you can easily do it, these are all small things, remind me. This two-column adaptation is not both adaptive.

This is the end of this article on "how to implement css two-column layout based on BFC rules". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.