将嵌入式块DIV对齐到容器元素的顶部 [英] Align inline-block DIVs to top of container element
本文介绍了将嵌入式块DIV对齐到容器元素的顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当两个inline-block
div
具有不同的高度时,为什么两个中的较短者未对准容器的顶部? ( 演示 ):
When two inline-block
div
s have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.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
对准其容器的顶部?
How can I align the small div
at the top of its container?
推荐答案
因为vertical-align
默认设置为 baseline .
改为使用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
应用于子元素.
Or as @f00644 said you could apply float
to the child elements as well.
这篇关于将嵌入式块DIV对齐到容器元素的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文