将行内块DIV对齐到容器元素的顶部 [英] Align inline-block DIV's to top of container element
本文介绍了将行内块DIV对齐到容器元素的顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当两个 inline-block
div
有不同的高度时,到容器的顶部? ( DEMO ):
HTML :
< div class =container>
< div class =small>< / div>
< div class =big>< / div>
< / div>
CSS:
code> .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 $因为
vertical-align $ ...>
改用
pre>
.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
给子元素。
When two inline-block
div
's have differing heights, why does the shorter of the two not align to the top of the container? (DEMO):
HTML:
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
CSS:
.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;
}
How can I align the small div
at the top of its container?
解决方案
Because the vertical-align
is set at baseline as default.
Use this instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top;
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as @f00644 said you could apply float
to the child elements as well.
这篇关于将行内块DIV对齐到容器元素的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文