1

特定の寸法を持ち、高さが異なる単一の子要素を持つホルダー div があり、それをベースラインに合わせようとしています。現在、コンテナーと同じ固定高さの 2 番目の要素があり、コンテナーを下に揃えますが、それが単独である場合は、適用されるルールに関係なく、上にくっつきます。

では、要素が唯一の子要素である場合、要素をコンテナーの下部に垂直に揃えるにはどうすればよいでしょうか?

編集

私が使用しているコードを公開する過程で、投稿した解決策を思いつきました。position最初の問題はこれと似ていますが、ルールがなく、display:inline-block子要素についてです。それはほとんど一長一短です...

4

3 に答える 3

1

table-cell を使用した一方向

必要最小限のマークアップを想定すると、次のようになります。

<div class="wrap">
    <div>Some content...</div>
</div>

次の CSS がそれを行います。

.wrap {
    border: 1px solid red;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: bottom;
}

主な利点: インライン要素とブロック レベル要素の両方で機能します。
短所: 古いブラウザでは認識されないdisplay: table-cell

デモ: http://jsfiddle.net/audetwebdesign/eXKbt/

インラインブロックを使用する別の方法

次の CSS を適用することで、このようにすることもできます。

.wrap2 {
    border: 1px solid red;
    height: 200px;
    width: 200px;
}
.wrap2:before {
    content: "";
    width: 0;
    height: 190px;
    display: inline-block;
}
.wrap2 div {
    display: inline-block;
    width: 190px;
    border: 1px dotted red;
    vertical-align: bottom;
}

ただし、このアプローチでは、疑似要素を使用して架空のインライン ブロックを定義し、ベースラインをボックスのほぼ完全な高さに設定してから、子要素で垂直方向の位置合わせを使用していました。幅に関連するいくつかの問題がありましたが、動作させることができます。

デモについては、以前のフィドルを参照してください。

于 2013-09-07T22:27:39.163 に答える