The method of adaptive layout of css3 multi-orchid
The knowledge of this article "css3 Dolan adaptive layout method" is not understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "css3 Dolan adaptive layout method" article.
Adaptive Dolan layout (with margin boundary in the middle), is there any other way to deal with this besides percentage:
After thinking about it for a while, I found that the layout of box-flex was more inconvenient. Still use the: column-count attribute (the gap between the specified columns) to get closer to the scene more quickly.
Full demo:
Demo
* {margin:0;padding:0;}
/ * Multi-column adaptive layout * /
.newspaper {
-moz-column-count:4; / * Firefox * /
-webkit-column-count:4; / * Safari and Chrome * /
Column-count:4
-moz-column-gap:40px; / * Firefox * /
-webkit-column-gap:40px; / * Safari and Chrome * /
Column-gap:40px
}
/ * the content is centered vertically left and right * /
.newspaper .each {
Background:red;height:200px
Display:-webkit-flex
Display: flex
-webkit-align-items: center
Align-items: center
-webkit-justify-content: center
Justify-content: center
}
Content 1
Content 2
Content 3
Content 4
The above is about the content of this article on "css3 Dolan adaptive layout method". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.
