将内联块 DIV 与容器元素的顶部对齐 [英] Align inline-block DIVs to top of container element

问题描述

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

.container {边框:1px 黑色实心；宽度:320px；高度:120px；}.小的 {显示:内联块；宽度:40%；高度:30%；边框:1px 黑色实心；背景:aliceblue；}.大 {显示:内联块；边框:1px 黑色实心；宽度:40%；高度:50%；背景:米色；}

<div class="small"></div><div class="big"></div>

如何对齐容器顶部的小 div?

解决方案

因为 vertical-align 默认设置在 baseline.

使用 vertical-align:top 代替:

.small{显示:内联块；宽度:40%；高度:30%；边框:1px 黑色实心；背景:aliceblue；垂直对齐:顶部；/* <---- 这个 */}

http://jsfiddle.net/Lighty_46/RHM5L/9/

或作为 @f00644 说你也可以将 float 应用于子元素.

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>

How can I align the small div at the top of its container?

解决方案

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

Use vertical-align:top instead:

.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/

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

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