0

テーブルとして機能するさまざまな DIV タグを使用しており、コンテンツ DIV の下部に別の DIV を取得したいと考えています。

<div class="table">
    <div class="table-row">

        <div class="table-information">
            Content
        </div>

        <div class="table-content">
            More content

            <div class="extra">
                Here's the extra content
            </div>
        </div>

    </div>
</div>

CSSは次のとおりです。

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-information {
    background-color: #eaeaea;
    height: 150px;
    padding: 10px 15px;
    width: 150px;
}

.table-content {
    display: table-cell;
    height: 150px;
    padding: 10px 15px;
}

.extra {
    vertical-align: bottom
}

ご覧のとおり、私はクラスvertical-align: bottom;のために持っています。extraその DIV 内のコンテンツを text のすぐ下ではなく、下部に配置したいと考えていますMore content。しかし、このソリューションを試しても何も起こりません。

http://jsfiddle.net/edgren/3jjbV/

どうすればこの問題を解決できますか?

前もって感謝します。

4

1 に答える 1

0

これを達成するための1つの方法があります

.table-content {
    display: table-cell;
    height: 150px;
    padding: 10px 15px;
    position:relative;
    width:150px;
}
.extra {
    vertical-align: bottom;
    bottom:0;
    position:absolute;
}

コンテナに相対位置を追加してからtable-content、底に絶対位置を追加することでそれを行いextraます。
ここにフィドルがあります

別の方法は次のとおりです。

.extra {
    vertical-align: bottom;
    display:table-cell;
    height: 150px;
    width:150px;
}

これは、2番目のオプションのフィドルです。
これらの 2 つのオプションから、個人的には最初のオプションを使用しますが、幅と高さが固定されていることに注意する必要があります (絶対配置のため)。

于 2013-04-18T00:12:30.893 に答える