2

マイページのトップにロゴがあります。高さは約250pxです。これに続いて、3 つのテキスト フィールドを (画像と共に) 下揃えにしたいと考えています。フィールドは、翻訳目的で英語、フランス語、ドイツ語の略語を表します。

私は完全なbootstrap.cssを使用しており、2行を追加しました（投稿で提案されているように：グリッド内のテキスト/画像/リンクを整列させますが、それでも機能しません。

.fixedheight { height: 250px; position:relative; }
.bottomaligned {position:absolute; bottom:0; }

ENG および FRA 用の 1 つの余分な CSS 行

.bottomaligned2 {position:static; bottom:0; }

HTML コードは次のとおりです。

<body>
<div class="container">
    <div class="row fixedheight">
        <div class="span3 offset4">
            <img src="./images/logo.jpg" alt="Logo">
        </div><!-- /span -->
        <div class="span1 bottomaligned">
            NED
        </div><!-- /span -->
        <div class="span1 bottomaligned2">
            ENG
        </div><!-- /span -->
        <div class="span1 bottomaligned2">
            FRA
        </div><!-- /span -->
    </div><!-- /row -->
</div><!-- /container -->
</body>

これを行うために誰かが私を正しい方向に向けることができますか?
ありがとう、
ゲルト

4

1 に答える 1

2

いくつかの実験と@DavePのヒントの後、最終的に解決策を見つけました。

新しい CSS コード:

.fixedheight { height: 250px; position:relative; }
.bottomaligned {position:relative; top:80%; height:10em; margin-top:-5em}

position:absoluteTwitter Bootstrap の div がそれを処理するので、選択する必要はありません。

HTML:

<body>
<div class="container">
    <div class="row fixedheight">
        <div class="span3 offset4">
            <img src="./images/logo.jpg" alt="Logo">
        </div><!-- /span -->
        <div class="bottomaligned">
        <div class="span1">
            ENG                          
        </div><!-- /span -->
        <div class="span1">
            NED
        </div><!-- /span -->
        <div class="span1">
            FRA
        </div><!-- /span -->
        </div>
    </div><!-- /row -->
</div><!-- /container -->
</body>

今のところ、これにより、5 列目から始まる画像が表示され、テキストは画像の右側にほぼ下揃えされます。

于 2012-07-02T20:05:23.270 に答える