将内联块 DIV 对齐到容器元素的顶部

Align inline-block DIVs to top of container element(将内联块 DIV 对齐到容器元素的顶部)

问题描述

当两个 inline-block div 的高度不同时，为什么两者中较短的不与容器顶部对齐?(演示):

When two inline-block divs 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.

Because the vertical-align is set at baseline as default.

使用 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 应用于子元素.

Or as @f00644 said you could apply float to the child elements as well.

这篇关于将内联块 DIV 对齐到容器元素的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！