CSS skills! Layout Div like table

The following is my translation.ArticleYou don't have to pick out the incorrect translation. My goal is to convey this CSS technique.

Many Web designers like to place two or more containers side by side, and display the content of each container in it, just as cells in the classic table layout control the positions of several columns, you also like the center or top align display of the container content.
But you don't like to use table to implement it. What should you do? There are many implementation methods, which are implemented based on the visual illusion. js control is used to make the height equal, in addition, the container overflow part is used to hide the negative bottom boundary of the column and the positive internal patch to solve the problem of the same column height.
In fact, there is a simple method, which can be achieved by using display: Table, display: Table-row and display: Table-cell, and containers with a small height will adapt to those with a relatively high height, however, ie does not support this attribute. We do not need to blame Ie first. I believe it will be improved in the future. Here I have created a model.

First, let's look at the structure of XHTML:

 

<Div class = "equal">
<Div class = "row">
<Div class = "one"> </div>
<Div class = "two"> </div>
<Div class = "three"> </div>
</Div>
</Div>

 

It is easy to understand without explanation, but the structure of a table is provided here. Is it very similar?

 

<Table>
<Tr>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</Tr>
</Table>

 

The following is CSS:

 

. Equal {
Display: Table;
Border-collapse: Separate;
}
. Row {
Display: Table-row;
}
. Row Div {
Display: Table-cell;
}
. Row. One {
Width: 200px;
}
. Row. Two {
Width: 200px;
}
. Row. Three {

}

 

Explanation:

1. dispaly: Table; let layer. Equal be displayed as a table of block-level elements, that is, as a table
2. Border-collapse: Separate; the border is independent, just as before the table does not merge Cells
3. display: Table-row; display. row as the table row tr
4. display: Table-cell; Use the lower-level Div of. row as the table cell TD.
5. then define the width

Border-Spacing: 10px; is used to distinguish several boxes. As stated above, ie cannot be displayed normally, but in: Mozilla 1.6, Opera 7.50, Safari 1.2.2, firefox 0.8, omniweb 5B, Camino 0.8b, and Netscape 7.1 can be perfectly displayed after tests.

The problem above is that this model is equivalent to garbage for IE, so it can only be used for fun. It is of no practical use. What I want to do now is, so that it can be better displayed in IE, so I made a second model.

Similar to the first model, the XHTML structure only adds a new Div to IE.

<Div class = "equal">
<Div class = "row">
<Div class = "one"> </div>
<Div class = "two"> </div>
<Div class = "three"> </div>
<! -- [If IE]>
<Div class = "ieclearer"> </div>
<! [Endif] -->
</Div>
</Div>

Add a judgment to XHTML, determine whether it is IE, and then give ie a special treatment, in IE display different from other browsersCodeIn this case, the content displayed in IE \ Mac is prioritized.

Then add a judgment in CSS. In combination with XHTML, use the floating alignment (floating alignment does not need to be explained) method to place the height of the container side by side, but still cannot implement the height of the container, you can use the visual illusion of adding background colors to achieve high levels of vision, or use other methods, which will not be described here.

The following is the code in CSS.

<! -- [If IE]>
<Style type = "text/CSS" Media = "all">
. Equal,. Row {
Display: block;
}
. Row {
Padding: 10px;
}
. Row Div {
Display: block;
Float: left;
Margin: 0;
}
. Row. Two {
Margin-left: 10px;
}
. Row. Three {
Width: 160px;
Float: right;
}
. Ieclearer {
Float: none;
Clear: both;
Height: 0;
Padding: 0;
Font-size: 2px;
Line-Height: 0;
}
</Style>
<! [Endif] -->

 

At this point, the entire design is actually completed. Although it is not perfect, it seems a little redundant to make efforts on the Internet instead of Internet Explorer. Now, Internet Explorer supports the first model, or we may come up with a better solution. However, this attempt is valuable.