Use CSS styles to encircle the problem of high-level columns (reproduced)

Mingxiuzhandao obedient while look

The heart of the cheats only 12 words: "Hidden container overflow, positive and negative internal and external margins." "After reading the following lines of code, you can really see the light in this sentence!"

Hide Container overflow . Set the overflow of the outer container to hidden:

.container {    overflow: hidden; }

This time the Refresh page is not effective, with the next step to see the light:

.left, .center, .right {    float: left;    width: 300px;    margin: 30px 10px;    // 为所有的列添加以下两行    padding-bottom: 500px;    margin-bottom: -500px;}

Above is the positive and negative internal and external margins: Set the bottom of the inner margin is not possible to use a positive height, while the bottom margin is set to the opposite number, cleverly eliminate the redundancy of the internal margin height. Great, look at the effect:

Layout

Understanding this multi-column high-level scenario has three main points: why set padding-bottom ? Why set? Why settings? margin-bottom overflow: hidden

1. Settings padding-bottom . Setting this property expands the range of background color rendering and provides the basic criteria for cropping when the background color is large enough. In fact, the content area is still unequal.
2. Settings margin-bottom . Setting this property is used to eliminate excess space occupied, which is a remedy for the previous property.
3. Settings overflow: hidden; . When the content is highly expanded, the container height is expanded, by setting this property for the container, the intention is to cut out the excess parts of the container, in fact, the target is a multi-column inside the container, this is Mingxiuzhandao obedient while look.

When you check with the developer tools, you can learn about one or two:

Element review

As is said, there is no perfect plan for the moment. The biggest flaw in this scenario is the inability to set the bottom border, which is a sacrifice of border-botton attributes. This solution can meet all the other requirements, compatibility is to do the ie6+:

Use CSS styles to encircle the problem of high-level columns (reproduced)