1

我已经看到如何使用 position: absolute; 将 Div 强制到包含 Div 的底部。和底部：0px；以及如何强制包含 Div 扩展以容纳子 Div，但我无法让它们一起工作。我正在尝试创建一个可供在浏览器中更改字体大小的查看者访问的网站。

此代码将强制 Div 到底部，但不会使包含的 Div 扩展为必要的。如果我将 .exhibit_text 位置更改为相对，则包含的 Div 会扩展，但底部对齐会丢失。（文本来自数据库，所以我不知道它会有多长时间或用户设置字体大小有多大。）

<style type="text/css">
.exhibit {
    position: relative;
}
.exhibit_text {
    width: 380px;
    position: absolute;
    bottom: 0px;
    float: left;
}
.exhibit_image {
    height: 300px;
    width: 400px;
    margin-left: 450px;
    background-color:#FF0;
}
hr {
    clear: both;
}
</style>
<hr />
<div class='exhibit'>
    <div class='exhibit_text'><p>Long text: Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. Susan Low-Beer and Meryl McMaster expand our understanding of the genre. </p>
    </div>
    <div class="exhibit_image">
    </div>
</div>
<hr />
<div class='exhibit'>
    <div class='exhibit_text'><p>Short text: Susan Low-Beer and Meryl McMaster expand our understanding of the genre. </p>
    </div>
    <div class="exhibit_image">
    </div>
</div>
<hr />
4

2 回答 2

1

我不确定你的“扩展”是什么意思，所以我猜你希望容器（DIV）的 div 位于底部，容器（DIV）可能会扩展高度。

这是代码：

.exhibit > div{
    display: inline-table;
    vertical-align: bottom;
}

试试看：）

于 2013-06-04T03:15:09.990 回答
0

我建议去掉exhibit_text. 我会改为设置 amin-width: 380px和 set width: auto。这应该意味着 div 将扩展以包含其中包含的所有内容，并且宽度不会小于 380 像素。

编辑：我不是 100% 确定您要达到的目标。我将您的代码粘贴到 JSFIDDLE 中，字体为 25px，它只是将文本环绕。你到底想达到什么目的？

小提琴

于 2013-06-04T02:58:23.777 回答