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; }

虽然将内部 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和table-cell是 CSS2.1 的一部分，并且向后兼容 IE8，查看更多详细信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/display

于 2013-10-01T11:23:05.077 回答