Richten Sie den Inline-Block-DIV oben auf dem Containerelement aus

Question

Wenn zwei inline-blocks div unterschiedliche Höhen haben, warum stimmt der kürzere nicht mit der Oberseite des Containers überein? (DEMO):

.container {
    Rand: 1 Pixel schwarz einfarbig;
    Breite: 320px;
    Höhe: 120px;
}

.klein {
    Anzeige: Inline-Block;
    Breite: 40 %;
    Höhe: 30 %;
    Rand: 1 Pixel schwarz einfarbig;
    Hintergrund: aliceblue;
}

.groß {
    Anzeige: Inline-Block;
    Rand: 1 Pixel schwarz einfarbig;
    Breite: 40 %;
    Höhe: 50 %;
    Hintergrund: Beige;
}

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

Wie richte ich ein kleines div am oberen Rand seines Containers aus?

Answer 1

您需要为两个子div添加vertical-align属性。

如果.small始终较短，则只需将该属性应用于.small。 但是，如果其中任何一个可能是最高的，则应将该属性应用于.small和.big。

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

垂直对齐影响内联或表格单元格框，这个属性有很多不同的值。请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align了解更多详情。

Answer 2

因为默认情况下，vertical-align被设置为baseline。

改用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。