当两个内联块div具有不同的高度时，为什么两个中较短的没有对齐到容器的顶部?(演示):
.container { 边框:1px黑色实心; 宽度:320 px; 身高:120 px; } .small { 显示:inline-block; 宽度:40%; 高度:30%; 边框:1px黑色实心; 背景:aliceblue; } .big { 显示:inline-block; 边框:1px黑色实心; 宽度:40%; 高度:50%; 背景:米色; } < div class = "容器" > < div class = "小" > < / div > < div class = "大" > < / div > < / div >
我怎么能在它的容器顶部对齐小div ?
当前回答
您需要为两个子div添加一个垂直对齐属性。
如果.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;
}
垂直对齐影响内联或表格单元格框，这个属性有很多不同的值。详情请见https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align。
其他回答
为父div使用display: flex属性
flexbox项目在交叉轴的开始处对齐。 默认情况下，交叉轴是垂直的。这意味着flexbox项目将在顶部垂直对齐。
所以当你把display: flex属性应用到父div时，它会用vertical-align: top来设置它的子元素。
请看下面的代码: .container { 边框:1px黑色实心; 宽度:320 px; 身高:120 px; 显示:flex; /** CSS flex */ ｝ .small { 显示:inline-block; 宽度:40%; 高度:30%; 边框:1px黑色实心; 背景:aliceblue; ｝ .big { 显示:inline-block; 边框:1px黑色实心; 宽度:40%; 高度:50%; 背景:米色; ｝ < div class = "容器" > < div class = "小" > < / div > < div class = "大" > < / div > < / div >
浏览器兼容性:Flexbox在现代浏览器中得到了很好的支持。
<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/>");
})
您需要为两个子div添加一个垂直对齐属性。
如果.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;
}
垂直对齐影响内联或表格单元格框，这个属性有很多不同的值。详情请见https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align。
因为垂直对齐被默认设置为基线。
使用vertical-align:top代替:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
或者正如@f00644所说，你也可以对子元素应用float。
将overflow: auto添加到容器div中。 http://www.quirksmode.org/css/clearing.html当遇到这个问题时，这个网站显示了一些选项。
