Layout div_CSS/HTML like a table

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

The following is what I translated, which is a free translation based on my understanding of the article , don’t find fault with the translation, my purpose is just to convey this CSS technique

Many web designers like to place two or more containers side by side with equal height, and display each container inside The content of a container is like a cell in a classic table layout that controls the position of several columns. You also like the content of the container to be centered or top-aligned.
But you don’t like to use tables to implement it, so what should you do? There are many ways to implement it, including implementing it based on visual illusions, using JS control to make the heights equal, and using a method of hiding the overflow part of the container and combining the negative bottom boundary of the column and the positive inner 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 small heights will adapt to those with relatively high heights, but IE does not support this. Attributes, we don’t need to blame IE for now, I believe it will be improved in the future. Here I made a model.

First look at the structure of xhtml:

It’s very simple to understand without explanation, but here is a table structure, is it very similar?














The following is the 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 used as block level The table display of the element is to treat it as a table
2.border-collapse:separate; the border is independent, just like before the table has merged cells
3.display:table-row; treat .row as Table row tr display
4.display:table-cell; display the lower-level div of .row as table cell td
5. Then define the width Border-spacing:10px is also used here ; to distinguish between several boxes. As stated above, it cannot be displayed normally under IE, but it can be displayed under: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1 after testing. Perfect display.Now the whole mission is over.