将内联块DIV与容器元素顶部对齐
将内联块DIV与容器元素顶部对齐
提问于 2019-06-21 04:56:13
当两个inline-block divs具有不同的高度时，为什么两个中的较短者不对齐容器的顶部？（演示）：
.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>
如何对齐div容器顶部的小？
回答 2
Stack Overflow用户
发布于 2019-06-21 12:59:24
因为默认vertical-align设置为基线。
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/
或者@ f00644表示你也可以申请float子元素。
Stack Overflow用户
发布于 2019-06-21 14:29:43
<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/>");
})
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100007033
复制相关文章
相似问题