2

同じクラスの多数の div があり、それらのコンテナー div 内で垂直方向に整列させたいと考えています。

html 部分は次の例のようになります。

<div id="container">
    <div class="element">
        ........
    </div>

    <div class="element">
        ........
    </div>

    <div class="element">
        ........
    </div>
</div>

要素 (.element クラスの div) を「左」に浮かせたので、それらはすべて 1 つの行に表示されます。これまでのところ、まだ問題はありません。.element div の内容はさまざまです。デフォルトでは、それらは上に配置されています。このcssを使用して下に配置したいと思います：

#container {position:relative;}
#container .element {position:absolute;bottom:0;}

機能し、それらを下に揃えますが、残念ながらそれらをくっつけて、それらはすべて、1 つの div として 1 つの場所にあり、もう 1 つの div の上にあるように見えます。

width、margin、padding などを .element div に設定しようとしても何もしません。それらは 1 つの div として機能します。それらを分離するにはどうすればよいですか? 各 div に個別のクラスを与えることは正しい解決策ではないと思います。また、他に方法がまったくない場合を除き、テーブル ソリューションも使用したくありません。vertical-align:bottom を試してみましたが、何らかの理由で何もしません。

ずっと探していたのですがネット上に出てこないので、重複していたらすみません。前もって感謝します。

4

2 に答える 2

2

これが position:absolute のすべてです。なぜあなたがそれを使うのかわかりません。

私が正しく理解している場合は、divを下に垂直に配置し、それらを隣り合わせ/横に表示させたいですか? 次に、おそらく、div の display css 属性を display:inline-block; に変更する必要があります。代わりにスパンタグを使用することもできます。

于 2012-07-14T10:23:59.123 に答える
0

div を別の div でラップし、#containerその位置を相対位置に設定し、#container の位置を絶対位置に設定し、それを下に設定して、私の例bottom: 0を 参照してください

于 2012-07-14T10:23:48.587 に答える