将div与容器顶部对齐
[英]Align div with the top of a container
问题描述
我有一个无序列表样式水平显示。 其中一个li元素包含div元素。 这个div元素是使用ajax填充的，尽管它无关紧要。
div元素的高度大于li元素的其余部分，默认情况下它与父容器的底部对齐。
更新：嗯，这不是很尴尬。 我在jsfiddle http://jsfiddle.net/Bfp3K/编写了一个更简单的例子，它可以正常工作。 我必须再次检查我的代码以获取沙箱中的错误。
Update2：毕竟不是那么容易。 我添加了我提出的（和使用过的）解决方案。
Update3：忽略以前的答案，这是不正确的。 这是一个简化且可测试的问题示例：
JSFiddle： http ： //jsfiddle.net/Bfp3K/10/
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：
<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>
图片：
解决方案应该是什么样子： 问题是什么样的：
6 个解决方案
解决方案1
9 已采纳 2013-06-29 01:23:24
只需更换display:inline-block; float:left;声明float:left; 既然您仍在指定尺寸，则不需要inline-block 。 jsFiddle工作，这是一张照片。
.normal {
height:100px;
width:200px;
float:left;}
.big {
height:200px;
width:300px;
float:left;}
解决方案2
8 2013-06-29 01:29:57
毕竟解决方案非常简单。 基于另一个答案：
li div{
vertical-align:top;
}
由于元素有显示：inline-block; ，添加vertical-align：top似乎解决了它。 如果这不是正确的解决方案，我不会将此标记为解决方案。
解决方案3
2 2013-06-28 20:44:11
更新（底部对齐）：
<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
解决方案1（快速和脏）：设置margin-bottom: [negative value here]或bottom: [negative value here]如果您的li相对定位且div绝对定位。 这假设您知道确切的值。
解决方案2：我假设其他元素中的文本是链接。 将顶部和底部填充设置为这些链接（特别是<a>标签，以便它们在中间垂直对齐）
解决方案3（多一点html）：在每个li中放入两个div。 再次将你已经拥有的div包裹在另一个div中。 使用垂直居中方法（例如tabel-cell方法）垂直居中所有内部div。 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html （您已经拥有的li标签可能已经作为外部div包装，但我不确定。没有进行测试那个）
解决方案6
0 2013-06-28 21:23:27
在问题中发布的代码中，LI显示：inline，并且在jsfiddle'更简单的示例'中，它们的显示被重置为内联块（通过类）。 内联块与内联不同，它内部隔离任何块级内容（如DIV），而尝试将块级内容放入内联会导致内联元素分成几个所谓的匿名块框 。 可能是这个原因？
如何用容器div对齐一个div顶部和另一个底部？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.