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
- set the
vertical-align
totop
on thetd
- float the
div
s - give the bottom
div
amargin
equal to the height of the cell minus the sum of thediv
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/
精彩评论