css layout example: web page layout method

Many web designers like to place two or more containers side by side at equal heights and display the content of each container inside, just like the cells in a classic table layout that control the positions of several columns. They also like the convenience of containers. Content is displayed 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 attribute. We Don't blame IE for now, I believe it will improve in the future. Here I made a model.

Let’s 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?

Here is the css:

1.dispaly:table; Let layer.equal be displayed as a table of block-level elements, that is, treat it as a table
2.border-collapse:separate; The border is independent, just like before the table merged cells.
3.display:table-row; displays .row as table row tr
4.display:table-cell; displays the subordinate div of .row as table cell td
5. Then define the width

Border-spacing:10px; is also used here to distinguish several boxes. As stated above, it cannot be displayed normally under IE, but it is: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8 b, and Netscape 7.1 can be displayed perfectly after testing.