将<div>对齐到<td>顶部

Question

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

我有一个包含许多<td>的表格。每个td都有一个div .tdcont，这是该td中所有内容的包装器。在.tdcont中，我有两组divs .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{
}

- twitter

---

你试图将什么东西显示为 div，但它看起来仍然像表格？ - corroded

你能提供 .alwaystop 和 .below-at 的 CSS 吗？ - Dan

你尝试过display:table-cell、display:table-row或者它们家族中的其他属性吗？ - Damien Pirsy

是的，请发布您的CSS的其余部分。我们的鼻子不是那么好。 - Anriëtte Myburgh

Answer 1

试试这个：

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

- Exelian

---

我认为vertical-align属性取决于父元素是否设置为"display: inline;"。在表格中，必须对内容进行垂直对齐，而不是单元格，我错了吗？ - Joseph Orlando

好的，它正在工作。在这里检查它：http://jsfiddle.net/WgzgF/254/。不过你可能是对的，我不确定。 - Exelian

编辑：valign = vertical-align，不要与<tr valign="top">混淆，因为这在HTML5中已不再是有效的HTML。建议使用CSS以实现向前兼容性。 - Joseph Orlando

Answer 2

我已按照评论中@Damien的建议进行了演示： http://jsfiddle.net/AnrietteC/WgzgF/ 如果我理解正确，它似乎正在做你想要的事情。

- Anriëtte Myburgh

---

我已经更新了你的代码示例，以便向你展示我的意思。它没有正确对齐。看看这个：http://jsfiddle.net/WgzgF/11/ 我添加了更多的<td>和额外的内容来演示我的观点。 - twitter

这是我现在能想到的最接近的代码：http://jsfiddle.net/AnrietteC/WgzgF/21/ - Anriëtte Myburgh