css| skill translation from: Equal Height boxes with CSS
Original:
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
The following is my translation of the content, is based on my understanding of the article to paraphrase, you do not choose where to translate the wrong, my purpose is to convey this CSS skills
Many web designers like to put two or more containers, such as high side, and display the contents of each container, like the classic table layout in the cell control of several columns, but also like the contents of the container center or the top alignment display.
But you do not like to use table to achieve him, then how to do? The implementation of a number of methods, based on visual illusion, the use of JS control to make the height of equality, but also the use of the container overflow part of the hidden and column of the negative bottom edge and the combination of a positive patch to solve the problem of the same column height.
In fact, there is a simple way to use display:table, Display:table-row and Display:table-cell can be implemented, and the height of small containers will be adaptive to those heights relatively high, but IE does not support this property, We don't have to blame IE, I believe there will be some improvement. Here I made a model.
First 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's easy to understand without explanation, but here's the structure of a table, is it very similar
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Down 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 {
}
Explain:
1.dispaly:table the layer. Equal as a table table for block-level elements, that is, as a table
2.border-collapse:separate, border-independent, just as a table does not merge cells before
3.display:table-row the. Row as a table row TR display
4.display:table-cell the subordinate div of. Row as table cell TD display
5. Then define the width
Here also used border-spacing:10px to distinguish several boxes, as stated above, ie can not be normal display, but in: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b , Camino 0.8b, and Netscape 7.1 have been tested to be perfectly displayed.
So the whole mission was over.
