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

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!

<<:  Why can't my tomcat start?

>>:  Good website copywriting and good user experience

Recommend

JavaScript implements long image scrolling effect

This article shares the specific code of JavaScri...

A complete guide on how to query and delete duplicate records in MySQL

Preface This article mainly introduces the method...

How to implement hot deployment and hot start in Eclipse/tomcat

1. Hot deployment: It means redeploying the entir...

Vue project @change multiple parameters to pass multiple events

First, there is only one change event. changeleve...

Web design must have purpose, ideas, thoughts and persistence

<br />Introduction: This idea came to me whe...

How to open the port in Centos7

The default firewall of CentOS7 is not iptables, ...

Example of using javascript to drag and swap div positions

1 Implementation Principle This is done using the...

Linux lossless expansion method

Overview The cloud platform customer's server...

Sublime / vscode quick implementation of generating HTML code

Table of contents Basic HTML structure Generate s...

Three Discussions on Iframe Adaptive Height Code

When building a B/S system interface, you often en...

How to strike a balance between ease of use and security in the login interface

Whether you are a web designer or a UI designer, ...

Detailed explanation of mysql backup and recovery

Preface: The previous articles introduced the usa...