Html 将 <td> 中的 div 对齐到 <td> 的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5087787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning divs in <td> to top of <td>
提问by twitter
Update: added jsfiddle: http://jsfiddle.net/WgzgF/11/
更新：添加 jsfiddle：http: //jsfiddle.net/WgzgF/11/
I have a table with a bunch of <td>. Each td has a div .tdcontwhich is like a wrapper of all content in that td. In .tdcont, I have 2 groups of divs .alwaystopand .below-at.
我有一张桌子，上面放着一堆<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>
The problem I'm having is that alwaystopis supposed to align itself to the top border of the cell and below-atis supposed to come right under it like this
我遇到的问题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 | |
__________________|_________________|________________|
What I'm finding is that alwaystopand below-atcenter themselves vertically like you see in this fiddle http://jsfiddle.net/WgzgF/11/so if one of the adjacent cells in this row is long, alwaystopcenters itself to this row's height like this
什么我发现是alwaystop和below-at中心自己像垂直你在这个小提琴看到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 | |
__________________|_________________|________________|
What I want to do is make alwaystopalways start from the top of the cell regardless of adjacent cells' heights, then the below-atcomes under it. How can I do this?
我想要做的是alwaystop无论相邻单元格的高度如何，总是从单元格的顶部开始，然后below-at在它下面。我怎样才能做到这一点？
I should add that I have the content of alwaystopis floated left, so is the content of below-at, so they're supposed to be like 2 rows inside that td.
我应该补充一点，我的内容alwaystop是向左浮动的， 的内容也是below-at如此，所以它们应该像该 td 内的 2 行。
.at1, .at2, .at3{
float:left;
}
.bat1, .bat2, .bat3{
float:left;
}
The css for alwaystop and below-at is empty. I tried a whole bunch of stuff like vertical-align and absolute positioning, but nothing worked and I just gave up and deleted them.
alwaystop 和 below-at 的 css 是空的。我尝试了很多东西，比如垂直对齐和绝对定位，但没有任何效果，我只是放弃并删除了它们。
.alwaystop{
}
.below-at{
}
采纳答案by Anri?tte Myburgh
I have demonstrated as @Damien suggested in the comments:
我已经按照@Damien 在评论中的建议进行了演示：
http://jsfiddle.net/AnrietteC/WgzgF/
http://jsfiddle.net/AnrietteC/WgzgF/
And it seems to be doing what you want, if I understand correctly.
如果我理解正确的话，它似乎正在做你想做的事。
回答by Exelian
Try this:
尝试这个：
.table-td {
border: 1px solid red;
vertical-align: top;
}
