2

次の HTML と CSS を検討してください。

HTML

<div class="eq">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

CSS

.bar {
    background-color: green;
    width:15px;
    height:40px;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    bottom:0;
}

.eq {
    min-height:50px;
    border:1px solid blue;
}

青いdiv内の緑のバーの下に垂直に配置したいのですが、うまくいかないようです。何か案は？

JS フィドル: http://jsfiddle.net/qRH33/

4

2 に答える 2

2

私はもともと、に変更.barするdisplay:table-cellとうまくいくと思っていましたが（例）、そうすると、セルは親要素と同じ高さになります。

頭に浮かぶ唯一の解決策は、スパン要素をラップすることです。

<div class="eq">
    <div id="bars">
    <span class="bar"></span>
    ...
    <span class="bar"></span>
    </div>
</div>

次に、次の CSS (例)を使用します。動作します。

.bar {
    background-color: green;
    width:15px;
    height:40px;
    display: inline-block;
    vertical-align:bottom;
}
#bars {
    display:table-cell;
    vertical-align:bottom;
}
.eq {
    min-height:100px;
    border:1px solid black;
    display:table;
}

基本的に、ラッピング要素にdisplay:table-cellとを代入します。これは、さまざまな高さで機能します。（例）vertical-align:bottom#bars

要素間の間隔は、.barそれらが要素であるという事実によるものであることに注意してくださいinline-block。それを防ぎたい場合は、こちら(例)を参照してください。

于 2013-11-12T19:49:19.907 に答える
0

の高さに等しいコンテナにaline-heightを与えるだけです。divdiv

line-height: 50px;

これがJSFiddleです。

于 2013-11-12T18:56:10.823 に答える