Question

我希望根据内容扩展我的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; }

尽管以绝对方式转换内部div我可以在底部对齐内容，但只要内容超过容器，文本就会溢出到顶部，而容器不会增加其高度。

Answer 1

我认为您需要以下内容。

从 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值table和table-cell是CSS2.1的一部分，向后兼容IE8，详情请见：https://developer.mozilla.org/en-US/docs/Web/CSS/display

CSS：根据内容扩展容器div高度，同时将内部div放在底部

1 个答案: