5

このフィドルを参照してください。テキストを取り出すと、スパンがきれいに並んでいます。テキストを追加すると、ページの下部に表示されます。

<div>
    <span id="first">
    </span>
    <span id="second">
        Text
    </span>
</div>

span#first {
    display:inline-block;
    width: 100px;
    height: 100px;
    background-color: red;    
}

span#second {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: yellow;   
}
4

2 に答える 2

12

のデフォルト値はvertical-alignですbaseline。CSS 仕様では、vertical-align: baseline

ボックスのベースラインを親ボックスのベースラインに合わせます。ボックスにベースラインがない場合は、ボックスの下部を親のベースラインに合わせます。

空のブロックにはベースラインがないため、行の下部はspan親のベースラインと一致しdivます。次のspanには、テキスト (したがってベースライン) があるため、テキストを のベースラインに揃えますdiv。

vertical-align: top両方のspan要素を設定すると、正しく整列するはずです。

于 2012-05-28T03:26:18.340 に答える
3

float: leftのように追加してみてください

span#first {
    display:inline-block;        
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
}
span#second {
    display: inline-block;
    float: left;    
    width: 100px;
    height: 100px;
    background-color: yellow;   
}

参照: jsFiddle

于 2012-05-28T03:18:58.847 に答える