We usually use float layout to solve the compatibility issues of CSS in IE browser. For example, Taobao uses float layout to implement it. We will see a layout like the one shown below on the Taobao page. We call this evenly distributed layout of pictures an average layout. So how is this layout achieved? Some students may think that this is not difficult. They can simply set the width of the parent element div to be equal to the sum of the widths of the child elements. Is it really that easy? Let’s try it. test If we set the width of each child element to 100px, there are 3 child elements in total, and give each child element a margin-right of 50px, then the width of the parent element should be 100x3+50x2=400px. Let's set some styles. The html and css codes are as follows. //HTML <div class="father clearfix"> <div class="son"></div> <div class="son"></div> <div class="son"></div> </div> //CSS * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; display: block; clear: both; } .father { width: 400px; height: 100px; margin: 10px; background-color: #d5a4cf; border: 1px solid black; } .son { border: 1px solid black; background-color: #fff1ac; float: left; margin-right: 50px; width: 100px; height: 100px; } The effect is as follows We found that the last child element was pushed down. Why is that? Don’t ask why, because that’s CSS. So how should we solve this problem? Some students said that it is affected by the 1px border of the parent element. Let’s try changing it to outline. We found that it still didn’t work. What should we do now? Next, I will introduce a “negative margin” method. We add a middle layer between the parent element and the child element, and set the margin-right of this div to -50px. Let's try it again. //HTML <div class="father clearfix"> <div class="middle clearfix"> <div class="son"></div> <div class="son"></div> <div class="son"></div> </div> </div> //CSS * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; display: block; clear: both; } .father { width: 400px; height: 100px; margin: 10px; background-color: #d5a4cf; outline: 1px solid black; } .son { border: 1px solid black; background-color: #fff1ac; float: left; margin-right: 50px; width: 100px; height: 100px; } .middle { margin-right: -50px; } At this time, we found that the middle div "wrapped" the three child elements by "extending" the right margin, thus achieving an average layout . in conclusion Through our testing, we found a solution to the average layout problem, and we hope it will be helpful to everyone. For more information about CSS average layout, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: Why can't my tomcat start?
>>: Good website copywriting and good user experience
Usage of having The having clause allows us to fi...
1. Overflow content overflow settings (set whether...
Table of contents 1. Particle Effects 2. Load the...
Written in front There are two ways to upgrade My...
1. Table structure TABLE person id name 1 you 2 Y...
Table of contents The browser's rendering mec...
Table of contents 1. Overview 1.1 What is strict ...
MySQL Lock Overview Compared with other databases...
background Recently, I executed a DML statement d...
This article shares with you how to use bootstrap...
Preface Recently, when using MySQL 6.0.x or highe...
introduction Currently, k8s is very popular, and ...
The official source code of monaco-editor-vue is ...
This article shares the specific code for impleme...
When threads execute concurrently, we need to ens...