html - 将 <td> 中的 div 对齐到 <td> 的顶部

Question

更新:添加了 jsfiddle:http://jsfiddle.net/WgzgF/11/

我有一张 table ，里面有一堆 <td> .每个 td 都有一个 div .tdcont这就像那个 td 中所有内容的包装。在 .tdcont , 我有 2 组 div .alwaystop和 .below-at .

<td class="table-td">
   <div class="tdcont">
      <div class="alwaystop">           
         <div class="at1">at1</div>
         <div class="at2">at2</div>
         <div class="at3">at3</div>
      </div>            
      <div class="below-at">
         <div class="bat1">bat1</div>
         <div class="bat2">bat2</div>
         <div class="bat3">bat3</div>
      </div>
   </div>
</td>

我遇到的问题是 alwaystop应该将自身与单元格的顶部边框对齐，并且 below-at应该像这样在它下面

_____________________________________________________
at1 at2 at3       | at1 at2 at3     | at1 at2 at3    |
bat1 bat2 bat3    | bat1 bat2 bat3  | bat1 bat2 bat3 |
small image here  | big image here  |                |
                  | is taking lots  |                |
                  | of space        |                |
__________________|_________________|________________|      

我发现的是 alwaystop和 below-at就像你在这个 fiddle 中看到的那样垂直居中 http://jsfiddle.net/WgzgF/11/因此，如果此行中的相邻单元格之一很长，alwaystop像这样将自己居中到这一行的高度

_____________________________________________________
                  | at1 at2 at3     |                |
                  | bat1 bat2 bat3  |                |
at1 at2 at3       | big image here  | at1 at2 at3    |
bat1 bat2 bat3    | is taking lots  | bat1 bat2 bat3 |
small image here  | of space        |                |
__________________|_________________|________________|      

我想做的是制作alwaystop无论相邻单元格的高度如何，总是从单元格的顶部开始，然后是 below-at在它之下。我该怎么做？

我应该补充一点，我有 alwaystop 的内容向左浮动，below-at 的内容也向左浮动，所以它们应该像那个 td 内的 2 行。

.at1, .at2, .at3{ 
   float:left; 
}
.bat1, .bat2, .bat3{ 
   float:left; 
}

alwaystop 和 below-at 的 css 是空的。我尝试了一大堆东西，比如垂直对齐和绝对定位，但没有任何效果，我只是放弃并删除了它们。

.alwaystop{ 
}
.below-at{
}

Answer 1

试试这个:

.table-td {
    border: 1px solid red;
    vertical-align: top;
}