在底部放置文本，但让它留在文档流中 [英] Position text at bottom, but letting it stay in document flow
问题描述
我有以下问题：
有一个图像左浮，右边有边距。在它旁边，有一个div包含标题和文本（我不知道任何高度值两者，因为它将动态插入）。
标题必须与顶部对齐，文字与底部对齐。我认为足以定位文本绝对，但如果图像的高度小于标题+文本的高度，文本流入标题....
我没有找到任何解决方案将文本放在底部，但让它留在文档流。
我不允许使用任何table-元素（在另一方面，显示：表等是允许的，但我还没有找出任何解决方案，以及）
<<< HTML
< div>
< h4>标题，不涉及< / h4>
< div class =clearfix>
< div> <！ - float left，margin-right - >
< img>
< / div>
< div> <！ - float left - >
< h5>标题对齐到顶部< / h5>
< p>
一些文本与底部对齐
< / p>
< / div>
< / div>
< / div>
HTML
请帮助我，我只是无法找出任何解决方案！ p>
/ EDIT：
imnages和text- / headline-containers的高度可能会有所不同，因此没有固定的高度。
我到目前为止是（通过假设，文本不会有超过4行（但这不是最好的方法）。下一个问题是：Firefox添加。底部的底部的底部：0 ;文字（如：bottom：-35px;但显示为底部：0; ... Chrome确实解释正确的方式）：
code>< style>
.box {
width：488px;
float：left;
margin-bottom：33px;
margin- 22px;
padding-top：5px;
}
.table {
display：table;
}
。 box.wide .box-content {
display：table-row;
}
.box.wide .box-content> div {
display：table-cell;
position：relative;
width：233px;
}
.box.wide .box-content> div：first-child {
margin-right：22px;
}
.box.wide .box-content div h5 {
padding-bottom：88px;
}
.box.wide .box- content div p {
position：absolute;
bottom：0px;
}
< / style>
< div class =box wide width-488>
< div>
< h4>Überschrift< / h4>
< div class =table>
< div class =box-content>
< div>
< img alt =height =401width =233src =res / dummy / 233-130.jpg>
< / div>
< div>
< h5>überschriftLorem ipsum dolor sit amet，con sectetuer adipiscingeliüberschriftLorem ipsum dolor sit amet，con sectetuer adipiscing elit< / h5>
< p>
Lorem ipsum dolor sit amet，con sectetuer adipiscing elit。 Aenean商品ligula eget dolor。 Lor em ipsum dolor amet。
< a href =＃> mehr< / a>
< / p>
< / div>
< / div>
< / div>
< / div>
< / div>
，相对和绝对定位：
< div&
< h4>标题，不涉及< / h4>
< div style =display：table;>
< div style =display：table-row;>
< div style =display：table-cell; padding-right：20px;>
< img style =display：blocksrc =http://baconmockup.com/300/200>
< / div>
< div style =display：table-cell; background：green; position：relative; vertical-align：top;>
< p style =>一些文本对齐到顶部< / p>
< p style =position：absolute; bottom：0;>一些文本对齐到底部< / p>
< / div>
< / div>
< / div>
< / div>
不依赖于任何固定高度，到图片的高度。
jsfiddle.net/EUvXh /
I have the following problem: There's an image floating left and a margin to the right. Next to it, there is a div containing a headline and a text (I don't know any height-values of both, because it will be inserted dynamically).
The headline must align to the top and the text to the bottom. I thought it's enough to position the text absolute, but if the height of the image is smaller than the height of the headline + the text, the text flows into the headline....
I haven't found any solution to position the text at the bottom but letting it stay in document flow.
I am not allowed to use any table-elements (on the otherhand, display: table and so on is allowed, but I haven't figured out any solution with that as well)
<<<HTML
<div>
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div> <!-- float left, margin-right -->
<img>
</div>
<div> <!-- float left -->
<h5>The headline aligning to the top</h5>
<p>
Some text aligning to the bottom
</p>
</div>
</div>
</div>
HTML
Please help me, I just can't figure out any solution!
/EDIT:
Both the imnages' and text-/headline-containers' height may vary, so no fixed height. What i got so far is (by assuming, the text wont have more than 4 lines (but thats not the best way). The next Problem is: Firefox adds the margin-bottom of .box to the bottom: 0; of the text (like: bottom: -35px; But shown as bottom: 0; ... Chrome does interpret that the right way):
<style>
.box {
width: 488px;
float: left;
margin-bottom: 33px;
margin-right: 22px;
padding-top: 5px;
}
.table {
display: table;
}
.box.wide .box-content {
display: table-row;
}
.box.wide .box-content > div {
display: table-cell;
position: relative;
width: 233px;
}
.box.wide .box-content > div:first-child {
margin-right: 22px;
}
.box.wide .box-content div h5 {
padding-bottom: 88px;
}
.box.wide .box-content div p {
position: absolute;
bottom: 0px;
}
</style>
<div class="box wide width-488">
<div>
<h4>Überschrift</h4>
<div class="table">
<div class="box-content">
<div>
<img alt="" height="401" width="233" src="res/dummy/233-130.jpg">
</div>
<div>
<h5>Überschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing eliÜberschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing elit</h5>
<p>
Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lor em ipsum dolor amet.
<a href="#">mehr</a>
</p>
</div>
</div>
</div>
</div>
</div>
Here is a solution for you, using display: table, relative and absolute positioning:
<div>
<h4>A headline, that isn't involved</h4>
<div style="display:table;">
<div style="display:table-row;">
<div style="display:table-cell;padding-right: 20px;">
<img style="display:block" src="http://baconmockup.com/300/200">
</div>
<div style="display:table-cell;background:green;position:relative;vertical-align:top;">
<p style="">Some text aligning to the top</p>
<p style="position:absolute;bottom:0;">Some text aligning to the bottom</p>
</div>
</div>
</div>
</div>
It does not rely on any fixed heights, and adopts to the height of the image automatically.
jsfiddle.net/EUvXh/
这篇关于在底部放置文本，但让它留在文档流中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
