How to realize the dual-column Adaptive layout of CSS

This article mainly introduces the relevant knowledge of "how to realize the double-column adaptive layout of CSS". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this article "how to realize the double-column adaptive layout of CSS" can help you solve the problem.

What is a dual-column adaptive layout?

Two-column adaptive layout means that one part is supported by the width of the content, and the other column automatically changes the width. There are three ways to achieve dual-column adaptive layout, which are introduced below.

Implementation of two-column Adaptive layout with float+overflow:hidden

This method mainly triggers BFC (a CSS rendering mode that refers to a separate rendering area or an isolated container) through overflow:hidden. One feature of BFC is that it does not overlap floating elements.

Realize the source code:

CSS implements two-column adaptive layout-(yisu.com) # left {width: 200px; height: 300px; float: left; background-color: red } # right {height: 300px; background-color: blue; overflow:hidden; zoom:1;} use flex layout

Flex layout is also called elastic box layout, and it is easy to use it to implement two-column adaptive layout. We just need to add this attribute to the outermost box. The specific code is as follows:

CSS implements two-column adaptive layout-(yisu.com) # big {display: flex;} # left {width: 200px; height: 300px; float: left Background-color: red;} # right {height: 300px; background-color: blue; flex: 1;} using grid layout implementation

Grid layout, which is a grid-based two-dimensional layout system, can be used to optimize user interface design. The implementation effect is common, and the specific implementation code is as follows:

CSS implements two-column adaptive layout-(yisu.com) # big {display: grid; grid-template-columns: auto 1fr;} # left {width: 200px; height: 300px Float: left; background-color: red;} # right {height: 300px; background-color: blue } this is the end of the introduction to "how to realize the dual-column adaptive layout of CSS". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.