0

コンテナの下部にコンテンツを貼り付けながら、コンテンツに応じて div 要素を拡張したいと思います。

コンテナの高さを伸ばすために次のことを思いつきましたが、これは問題ありませんが、絶対位置を取得できません。内側の div を絶対に一番下に配置するとすぐに、内側のコンテンツが悪い位置に配置されます。

        <div id="id1" class="subcontent-wrap2">
            <div class="innerTextBox2">
                <h3 class="title2">Title</h3>
                <div class="text2">Lorem ipsum dolor sit amet, consectetur     adipiscing elit. Etiam fringilla turpis nisl, sit amet faucibus turpis egestas non. Phasellus est urna, dapibus a dignissim non, cursus in risus. Aenean eu lorem odio. Fusce bibendum tristique purus, id consectetur tellus posuere non. Phasellus consequat tincidunt dui, eu vestibulum odio venenatis sed. Proin convallis fermentum purus, ac tempus libero sollicitudin et. Sed vel risus vitae dui sollicitudin ornare. Proin accumsan eget magna non cursus. Nulla sollicitudin dapibus bibendum. Suspendisse eleifend suscipit lacus in suscipit. Nullam interdum massa vitae nisi viverra, in porta ante aliquet. Donec diam urna, euismod vel lacus vitae, sagittis fermentum orci. Phasellus dictum erat orci, dapibus volutpat dolor dictum non. Curabitur dignissim sagittis elementum. Sed facilisis consectetur mi sit amet vehicula. Aliquam lacus risus, eleifend ut accumsan sed, viverra ut eros. Fusce sem risus, sagittis ut lorem id, condimentum ultrices ante. Aliquam vitae orci quam. Integer nec mi nec magna pulvinar sodales ut nec ipsum. Nullam nec nisi quis erat dictum consectetur sed sed lorem. Vivamus sodales turpis tempus diam mollis, quis tempor turpis hendrerit. Sed luctus interdum euismod. Aliquam sed sapien dictum lorem dictum faucibus. Sed ut risus vestibulum, feugiat elit ut, euismod elit. Vestibulum hendrerit odio ullamcorper lacus vestibulum feugiat.
                </div>
                <img src="images/graphic.jpg" class="boxPic" alt="....">
            </div>
        </div>

CSS

.title2, .text2 { font-family: 'Open Sans', sans-serif; } 
.subcontent-wrap2 { width: 464px; min-height: 250px; height: auto; overflow: auto; position: relative; text-align: left; }
.innerTextBox2 { position: relative; width: 314px; left: 145px; border: 1px solid green; }
.boxPic { width: 140px; height: 250px; position: absolute; bottom: 0; border: 1px blue solid; }
.title2 { font-size: 18px; font-weight: bold; color: #fff; text-transform: uppercase; margin-bottom: 20px; }
.text2 { font-size: 15px; color: #fff; line-height: 1.6em; position: absolute; bottom: 0; border: 1px solid purple; }

Inner div を絶対に変換すると、コンテンツを下部に揃えることができますが、コンテンツがコンテナーを超えるとすぐに、コンテナーが高さを増やさずにテキストが上部にオーバーフローします。

4

1 に答える 1

0

以下のようなものが欲しいと思います。

このHTMLから始めます。

<div id="id1" class="subcontent-wrap2">
    <div class="innerTextBox2">
        <h3 class="title2">Title</h3>
        <div class="text2">Lorem ipsum ...</div>
        <img src="http://placehold.it/140x250" class="boxPic" alt="...">
    </div>
</div>

次のCSSを試してください：

.title2, .text2 {
    font-family:'Open Sans', sans-serif;
}
.subcontent-wrap2 {
    display: table;
    width: 464px;
    height: 250px;
    border: 1px dotted blue;
}
.innerTextBox2 {
    display: table-cell;
    vertical-align: bottom;
    border: 1px solid green;
}
.boxPic {
    vertical-align: bottom;
    width: 140px;
    height: 250px;
    border: 1px blue solid;
}
.title2 {
    font-size: 18px;
    font-weight: bold;
    color: #ccc;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.text2 {
    display: inline-block;
    width: 280px;
    font-size: 15px;
    color: #ccc;
    line-height: 1.6em;
    border: 1px solid purple;
}

デモを参照してください: http://jsfiddle.net/audetwebdesign/rxKHT/

.subcontent-wrap2コンテナーに、幅と高さを適用しdisplay: tableて固定します。テーブルでは、高さは最小値と見なされるため、コンテンツが適切な高さを超えると、必要に応じてテーブルが拡張されます。

の場合.innerTextBox2は、 を使用display: table-cellしvertical-align: bottomてから、すべてのコンテンツをこのコンテナーの下部に配置します。

画像とテキストをどのように配置したいのかわかりませんでしたが.text2、幅のあるインラインブロックに設定しました。.text2現時点では、テキストは画像の左側にありますが、画像を右側に配置したい場合は、画像をソース コード内のブロックに移動します。

ブラウザの互換性

display値 os tableおよびは CSS2.1のtable-cell一部であり、IE8 と下位互換性があります。詳細については、https ://developer.mozilla.org/en-US/docs/Web/CSS/display を参照してください。

于 2013-10-01T11:23:05.077 に答える