html – 将div对齐到顶部

更新：添加了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应该与单元格的顶部边界对齐,而under-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和under-at-center本身垂直,就像你在这个小提琴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始终从单元格的顶部开始,而不管相邻单元格的高度,然后下面的at来自它.我怎样才能做到这一点？

我应该补充说,我的alwaystop的内容是浮动的,所以是下面的内容,所以它们应该像td中的2行.

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

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

.alwaystop{ 
}
.below-at{
}

解决方法

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

如果我理解正确,它似乎正在做你想要的.

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!