Column--css method with height equality

As shown in the results, you can use the table implementation, this article is implemented in CSS.

The tags are as follows:

<Divclass= "wrapper">    <Divclass= "box">        <H1>Andy Budd</H1>        <P>...</P>        <Divclass= "Bottom"></Div>    </Div>    <Divclass= "box">        <H1>Richard Rutter</H1>        <P>...</P>        <Divclass= "Bottom"></Div>    </Div>    <Divclass= "box">        <H1>Jeremy Keith</H1>        <P>...</P>        <Divclass= "Bottom"></Div>    </Div></Div>

In the instance, there are 3 div, each column a div, each div includes the title, the content, the empty Div, the empty div as the bottom corner of the hook , the 3 div into the container Div, using the container div limit height, the following code to set the style of the box:

{    width: 100%;}  {    width: 250px;     Margin-left: 20px;     float: left;     display: inline;     padding: 20px;     background: #89ac10 url (chapter08/img/top.gif) no-repeat left top;  /* The picture makes the top two corners a rounded corner */}

The results of the operation are as follows: 3 highly inconsistent columns generated

The key technique for producing three columns of equal height is to set a large bottom padding (220px) for each box, and then use a similar negative margin ( -200px) to eliminate this height.

. Wrapper{float: Left;Border:Solid 1px Black;width:100%;}. Box{width:250px;Padding-left:20px;Padding-right:20px;Padding-top:20px;Padding-bottom:220px;Margin-bottom:-200px;Margin-left:20px;float: Left;Display:inline;background:#89ac10 URL (chapter08/img/top.gif) no-repeat left top;}

By floating the container and adding a border, you can see that this causes each column to overflow the container element.

. Wrapper{Border:Solid 1px Black;width:100%;Overflow:Hiddden;}. Box{width:250px;Padding-left:20px;Padding-right:20px;Padding-top:20px;Padding-bottom:220px;Margin-bottom:-200px;Margin-left:20px;float: Left;Display:inline;background:#89ac10 URL (chapter08/img/top.gif) no-repeat left top;}

If the container's overflow is set to hidden, the column is clipped at the highest point, and the 20px difference between 220px and -200px forms a visible inner margin at the bottom of each box.

The bottom of the column is positioned in the correct position, requiring them to be aligned with the base of the container: To do this, set the container's position to relative, then set the position of the empty div to absolute, and then set their bottom to 0. The bottom background image can be applied as long as they are set to the correct width and height.

. Wrapper{Border:Solid 1px Black;width:100%;Overflow:Hiddden;position:relative;}. Box{width:250px;Padding-left:20px;Padding-right:20px;Padding-top:20px;Padding-bottom:220px;Margin-bottom:-200px;Margin-left:20px;float: Left;Display:inline;background:#89ac10 URL (chapter08/img/top.gif) no-repeat left top;}. Bottom{position:Absolute;Bottom:0;Height:20px;width:290px;background:#89ac10 URL (chapter08/img/bottom.gif) no-repeat left bottom;Margin-left:-20px;/*because Margin-left is set to 20px in. box, the. Bottom moves 20px to the right (as in the last figure), so set -20px to move it left*/}

Column--css method with height equality