开发者

Vertically align <div> contained in <td>

I have something like this:

<tr>
  <td>
    <div class="blue">...</div>
    <div class="yellow">...</div>
  </td>
  <td>
    <div class="blue">...</div>
    <div class="yellow">...</div>
  </td>
</tr>

Here's a example of my current HTML: http://jsfiddle.net/DcRmu/2/

Inside a <tr>, all <td>s have the same height. I want the yellow <div>s inside those <td>s to align开发者_JAVA技巧 vertically along the bottom of <td>; and the blue <div>s to align vertically along the top of <td>. I tried to set vertical-align to bottom and it didn't work.

Thanks!


vertical-align:bottom; should work

Example: http://jsfiddle.net/jasongennaro/DcRmu/

EDIT

As per the new fiddle

You just need to place vertical-align:bottom; on the td not on the div

I updated your fiddle: http://jsfiddle.net/jasongennaro/DcRmu/7/

EDIT 2

I reread the question again and I saw the change

I want the yellow <div>s inside those <td>s to align vertically along the bottom of <td>; and the blue <div>s to align vertically along the top of <td>

To do this, you need to

  1. set the vertical-align to top on the td
  2. float the divs
  3. give the bottom div a margin equal to the height of the cell minus the sum of the div heights. In this case, 200px - (50px + 50px) = 100px.

New CSS

tr td{
    width:200px;
    height:200px;
    background:red;
    vertical-align:top;
}

div.blue{
    width:50px;
    height:50px;
    background:blue;
    float:left;
}
div.yellow{
    width:50px;
    height:50px;
    background:yellow;
    float:left;
    clear:both;
    margin-top:100px;
}

Working example: http://jsfiddle.net/jasongennaro/DcRmu/9/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜