6

div のコンテンツ テキストを一番下に取得する方法はありますか? ここで例を用意しました。

http://jsfiddle.net/JGuP7/

これはサンプル階層です:

<div class="button">Button Label</div>

スパンを追加したり、階層を変更したりせずに結果を達成しようとしています。

4

3 に答える 3

9

それぞれ独自の注意点がありますが、3 つの可能な解決策があります。

jsFiddle デモ

line-height: 220px; vertical-align: bottom;最初の解決策は、テキストを の下部に揃えることに依存していますDIV。:before2 番目の解決策は、テキストを の下部にプッシュする疑似要素を作成しますDIV(これには追加のマークアップは必要ありません)。どちらのソリューションも IE7 以前では失敗し、次の場合に問題が発生します。

  • 文字の大きさが変わる
  • テキストは 2 行目に折り返されます
  • 含まれている要素のサイズが変更されます

3 番目の解決策は、段階的に廃止される CSS プロパティであるプロパティに依存していdisplay: box;ます (詳細については、フレキシブル ボックス モデルを使用したクイック ヒットを参照してください)。このソリューションは、v4 以降の Chrome、v2 以降の Firefox、および IE10 ベータ版でのみサポートされています。ただし、新しい Flexbox 標準が標準化されていますが、ブラウザーのサポートは最小限です。このソリューションは、効果的に使用するには「新しすぎる」と見なすことができます ( html5please.com/#flexbox )。

一般的に言えば、position: absolute; bottom: 0;要素を親要素の下部に配置できるように、テキストの周りに新しいラッピング要素を検討する必要があります。これには、フォント サイズまたはテキストの長さが増加するにつれて子要素が上向きに成長するという利点があり、親コンテナーのサイズに依存しません。ポジショニングがレイアウトにとってどれほどミッション クリティカルであるかに応じて、Javascript を使用してこの新しい要素を追加できます。あなたが提起した質問を考えると、これはおそらく理想的ではありませんが、ブラウザのサポートは、上に挙げたより奇抜なCSSソリューションにとって理想的ではありません:-p

于 2013-02-05T16:46:20.540 に答える
5

これを行う別の方法は、「display: table-cell」と「vertical-align: bottom」を使用することです。

http://jsfiddle.net/JGuP7/1/

.button {
    display: table-cell;
    background-color: darkred;
    color: white;
    width: 120px;
    height: 120px;
    text-align: center;
    vertical-align: bottom;
}
于 2013-02-05T16:16:51.393 に答える
0

position:relative容器で使用する場合は、

position:absolute;
bottom:0;

コンテンツでは、目的の結果を得ることができます。

CSSは次のようになります。

    .button
    {
        display: block;
        background-color: darkred;
        color: white;
        width: 120px;
        height: 120px;
        text-align: center;
        position: relative;
    }
    .bottomContent
    {
        position:absolute;
        bottom: 0;
    }

とあなたのHTML：

<div class="button"><p class="bottomContent">Button Label</p></div>

ソース

于 2013-02-05T16:07:57.183 に答える