CSS 将内联块 DIV 与容器元素的顶部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22092724/
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
Align inline-block DIVs to top of container element
提问by Youssef
When two inline-blockdivs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
当两个inline-blockdivs 具有不同的高度时，为什么两者中较短的不与容器顶部对齐？（演示）：
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>How can I align the small divat the top of its container?
如何div在其容器顶部对齐小号？
回答by Lighty_46
Because the vertical-alignis set at baselineas default.
因为默认vertical-align设置在基线处。
Use vertical-align:topinstead:
使用vertical-align:top来代替：
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top;
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as @f00644said you could apply floatto the child elements as well.
或者正如@f00644所说，您也可以应用于float子元素。
回答by michaelward82
You need to add a vertical-alignproperty to your two child div's.
您需要为vertical-align您的两个子 div添加一个属性。
If .smallis always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .smalland .big.
如果.small总是较短，则只需将该属性应用于.small. 但是，如果其中一个可能是最高的，那么您应该将该属性应用于.small和.big。
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-alignfor more details.
垂直对齐会影响行内或表格单元格的框，并且此属性有大量不同的值。有关更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align。
回答by holyghostgym
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
回答by Kbaugh
Add overflow: auto to the container div. http://www.quirksmode.org/css/clearing.htmlThis website shows a few options when having this issue.
将溢出：自动添加到容器 div。 http://www.quirksmode.org/css/clearing.html该网站在遇到此问题时显示了一些选项。
