Use div to implement table-like layout method_Experience exchange

Many web designers like to place two or more containers side by side at equal heights and display the contents of each container inside, just like the cells in a classic table layout that control the positions of several columns. Prefer the container's content 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. Moreover, containers with small heights will adapt to those with relatively high heights, but IE does not support this. Properties, we don’t have 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 is very simple to understand without explanation, but here is the structure of a table, is it very similar









Down 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 displayed as a table table of block-level elements, that is Treat it as a table
2.border-collapse:separate; The border is independent, just like the table before the cells are merged
3.display:table-row; Display .row as a table row tr
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 several boxes, as What is stated above cannot be displayed normally under IE, but it can be displayed perfectly 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.