当两个inline-block
div
的高度不同时,为什么两者中较短的那个不能与容器的顶部对齐?():
.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
与其容器顶部对齐?
发布于 2014-02-28 18:41:18
因为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
。
发布于 2014-02-28 18:41:48
您需要向您的两个子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。
发布于 2018-08-01 21:24:35
<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/>");
})
https://stackoverflow.com/questions/22092724
复制相似问题