对齐内联块div到容器元素的顶部

小开

最佳答案

因为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应用于子元素。

小开

你需要给你的两个子div添加vertical-align属性。

如果.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。

小开

将overflow: auto添加到容器div。 http://www.quirksmode.org/css/clearing.html这个网站在遇到这个问题时显示了一些选项

小开

<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`使用`display: flex`属性

flexbox项目在交叉轴的起点对齐。默认情况下，交叉轴是垂直的。这意味着flexbox项目将在顶部垂直对齐

所以当你将display: flex属性应用到父元素div时，它会用vertical-align: top来设置它的子元素。

参见以下代码:

.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}


.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>

浏览器的兼容性: Flexbox在现代浏览器中都得到了很好的支持。

对齐内联块div到容器元素的顶部

为父类div使用display: flex属性

为父类`div`使用`display: flex`属性