将行内块DIV对齐到容器元素的顶部 [英] Align inline-block DIV's to top of container element

问题描述

当两个 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屋！