CSS skills: layout div like a table

The following is my translation content, which is translated based on my understanding of the article. You should not pick out the incorrect translation. My purpose 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:

The code is as follows:	Copy code
<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?

The code is as follows:	Copy code
<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.
Now the entire task is finished.