将div与容器顶部对齐
[英]Align div with the top of a container
问题描述
I have an unordered list styled to display horizontally. 
我有一个无序列表样式水平显示。 One of the li elements contains a div element. 其中一个li元素包含div元素。 This div element is filled using ajax, though it shouldn't matter. 这个div元素是使用ajax填充的，尽管它无关紧要。
The div element has a larger height than the rest of the li elements, and by default it aligns with the bottom of the parent container. div元素的高度大于li元素的其余部分，默认情况下它与父容器的底部对齐。
Update: Well, isn't this awkward. 更新：嗯，这不是很尴尬。 I coded a simpler example in jsfiddle http://jsfiddle.net/Bfp3K/ , and it works properly. 我在jsfiddle http://jsfiddle.net/Bfp3K/编写了一个更简单的例子，它可以正常工作。 I have to check my code again to get the error in the sandbox. 我必须再次检查我的代码以获取沙箱中的错误。
Update2: It wasn't that easy after all. Update2：毕竟不是那么容易。 I have added my proposed (and used) solution. 我添加了我提出的（和使用过的）解决方案。
Update3: Disregard the previous answer, it wasn't correct. Update3：忽略以前的答案，这是不正确的。 This is a simplified and testable example of the problem: 这是一个简化且可测试的问题示例：
JSFiddle: http://jsfiddle.net/Bfp3K/10/ JSFiddle： http ： //jsfiddle.net/Bfp3K/10/
CSS: CSS：
#one {
background-color:red;
}
#two {
background-color:green;
}
#three {
background-color:yellow;
}
#four {
background-color:blue;
}
.normal {
height:100px;
width:200px;
display:inline-block;
}
.big {
height:200px;
width:300px;
display:inline-block;
}
ul {
display:block;
}
ul li{
display:inline;
}
HTML: HTML：
<ul>
<li><div id="one" class="normal">One</div></li>
<li><div id="two" class="normal">Two</div></li>
<li><div id="three" class="normal">Three</div></li>
<li><div id="four" class="big">
The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs.
</div></li>
</ul>
Images: 图片：
What the solution should look like: 解决方案应该是什么样子： What the problem looks like:
问题是什么样的：
6 个解决方案
解决方案1
9 已采纳 2013-06-29 01:23:24
Just replace the display:inline-block; 只需更换display:inline-block; declarations with float:left; float:left;声明float:left; Since you're specifying the dimensions anyway, you don't need inline-block . 既然您仍在指定尺寸，则不需要inline-block 。 The jsFiddle works and here's a pic. jsFiddle工作，这是一张照片。
.normal {
height:100px;
width:200px;
float:left;}
.big {
height:200px;
width:300px;
float:left;}
解决方案2
8 2013-06-29 01:29:57
The solution was very simple after all. 毕竟解决方案非常简单。 Based on another answer: 基于另一个答案：
li div{
vertical-align:top;
}
Since the elements have display:inline-block; 由于元素有显示：inline-block; , adding vertical-align:top seems to solve it. ，添加vertical-align：top似乎解决了它。 I won't mark this as the solution in case this isn't the proper solution. 如果这不是正确的解决方案，我不会将此标记为解决方案。
解决方案3
2 2013-06-28 20:44:11
updated (bottom-aligned): 更新（底部对齐）：
<html>
<head>
<style>
li {
display:inline-block;
}
.item {
vertical-align: bottom;
}
</style>
</head>
<body>
<ul>
<li>Text 1</li>
<li><div class="item">Text 2<img src="some.jpg"/></div></li>
<li>Text 3</li>
</ul>
</body>
</html>
解决方案4
1 2013-06-28 20:31:37
将LI的line-height高设置为图像的相同像素高度。
解决方案5
0 2013-06-28 20:36:57
Solution 1 (quick and dirty): set a margin-bottom: [negative value here] or bottom: [negative value here] if your li are relatively positioned and the div is absolutely positioned. 解决方案1（快速和脏）：设置margin-bottom: [negative value here]或bottom: [negative value here]如果您的li相对定位且div绝对定位。 This is assuming that you know exact values. 这假设您知道确切的值。
Solution 2: I'm assuming that the text in the other elements are links. 解决方案2：我假设其他元素中的文本是链接。 Set top and bottom padding to those links (specifically the <a> tags, so that they are vertically aligned in the middle) 将顶部和底部填充设置为这些链接（特别是<a>标签，以便它们在中间垂直对齐）
Solution 3 (a bit more html): Put two divs in each li. 解决方案3（多一点html）：在每个li中放入两个div。 Wrap the div you already have in another div again. 再次将你已经拥有的div包裹在另一个div中。 Use the a vertical centering method (such as the tabel-cell method) to vertically center all the inner divs. 使用垂直居中方法（例如tabel-cell方法）垂直居中所有内部div。 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (The li tags you already have might already work as the outer div wrap, but I'm not sure. didn't get to test that yet) http://www.jakpsatweb.cz/css/css-vertical-center-solution.html （您已经拥有的li标签可能已经作为外部div包装，但我不确定。没有进行测试那个）
解决方案6
0 2013-06-28 21:23:27
In the code posted in the question the LIs have display: inline, and in the jsfiddle 'simpler example' their display is reset to inline-block (via classes). 在问题中发布的代码中，LI显示：inline，并且在jsfiddle'更简单的示例'中，它们的显示被重置为内联块（通过类）。 Inline-block is different from inline that it isolates any block-level content (like DIVs) inside, while attempting to put something block-level into inline causes the inline element to break into several so called anonymous block boxes . 内联块与内联不同，它内部隔离任何块级内容（如DIV），而尝试将块级内容放入内联会导致内联元素分成几个所谓的匿名块框 。 May be this is the reason? 可能是这个原因？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.