How to use negative margin technology to achieve average layout in CSS

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!