Question

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

我的桌子上有一堆<td>。每个td都有一个div .tdcont，它就像是该td中所有内容的包装器。在.tdcont中，我有两组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就像你在这个小提琴http://jsfiddle.net/WgzgF/11/中看到的那样垂直居中，所以如果这行中的一个相邻单元格很长，{{{ 1}}将此自身置于此行的高度，如此

alwaystop

我应该补充一点，below-at的内容是向左浮动的，alwaystop的内容也是如此，因此它们应该像td中的2行一样。

below-at

alwaystop和under-at的css为空。我尝试了很多像垂直对齐和绝对定位的东西，但没有任何效果，我只是放弃并删除了它们。

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

Answer 1

试试这个：

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

Answer 2

我在评论中建议@Damien：

http://jsfiddle.net/AnrietteC/WgzgF/

如果我理解正确，它似乎正在做你想做的事。

将div对齐到顶部

2 个答案: