让div到达另一个div的顶部

Question

我正在制作一个模板，我想要一个div，他的身高达到另一个div的顶部。一个屏幕截图，解释了一下：

这是我的CSS：

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }

.column {
    margin: 0 10px;
    overflow: hidden;
    float: left;
    display: inline;
}
.row {
    width: 720px;
    margin: 0 auto;
    overflow: hidden;
}
.row .row {
    margin: 0 -10px;
    width: auto;
    display: inline-block;
}

和HTML：

<div class="row">
    <div class="column grid_9"><p><img src="img/bomb.gif" style=" margin-bottom: 10px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px;">
</p></div>
</div>

<div class="row">
    <div class="column grid_3"><p style="line-height: 222px;">TEST</p></div>

    <div class="column grid_6"><p>post</p></div>
    <div class="column grid_6"><p>post</p></div>
    <div class="column grid_6"><p>post</p></div>



</div>
        <div class="row">
            <div class="column grid_3"><p>footer</p></div>
            <div class="column grid_3"><p>footer</p></div>
            <div class="column grid_3"><p>footer</p></div>

    </div>

jsFiddle link

Answer 1

jsFiddle

<div class="row">
    <div class="column grid_9">
        <img src="img/bomb.gif" style="margin-bottom: 10px; padding: 5px;">
    </div>
</div>

<div class="row">
    <div class="column grid_3"><p style="line-height: 222px;">TEST</p></div>
    <div style="overflow: hidden">
        <div class="column grid_6"><p>post</p></div>
        <div class="column grid_6"><p>post</p></div>
        <div class="column grid_6"><p>post</p></div>
    </div>
</div>

<div class="row">
    <div class="column grid_3"><p>footer</p></div>
    <div class="column grid_3"><p>footer</p></div>
    <div class="column grid_3"><p>footer</p></div>
</div>

Answer 2

只需使用.grid_6 {float：right}即可。

更新

我使用的一种做法是将这三个div包装在另一个div中。我会做类似

的事情

<div style="overflow: hidden">
 <div style="float: left">TEST</div>
 <div style="float: right; overflow: hidden">
  <div>POST</div>
  <div>POST</div>
  <div>POST</div>
 </div>
</div>

Answer 3

我猜到了：

.grid_3 {
    position: relative;
    z-index: 100;
}

Answer 4

这个答案原来是Eric：

jsFiddle working

Answer 5

如果你想将最后一个帖子对齐，你可以做几件事

float:right; //may require parent to also float 
text-align:right; //to parent container
right:0px; // need to change position first I believe
margin-left:auto; // should push it to the right all the way
margin-left:123px; //fixed amount