我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
哦,年轻人…给你:
<div class="block">
<a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
<span>
<span class="r-b">A right-bottom-block with some information</span>
</span>
<span class="clearfix"></span>
</div>
<style>
.block {
border: #000 solid 1px;
}
.r-b {
border: #f00 solid 1px;
background-color: fuchsia;
float: right;
width: 33%
}
.clearfix::after {
display: block;
clear: both;
content: "";
}
</style>
没有绝对的立场! 响应! 版的
其他回答
很老的问题，但仍然…… 你可以像这样将一个div浮动到页面底部:
div{
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
你可以看到奇迹发生的地方。我认为你可以做同样的浮动到一个父div的底部。
If you're okay with only the bottom-most line of the text going to the side of the block (as opposed to completely around and underneath it, which you can't do without ending the block and starting a new one), it's not impossible to float a block to one of the bottom corners of a parent block. If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag. The last div is to make sure the parent tag surrounds the floated tags.
<div class="article" style="display: block;">
<h3>title</h3>
<p>
text content
<a href="#" style="display: block;float: right;">Read More</a>
</p>
<div style="clear: both;"></div>
</div>
如果你想要文本包装漂亮:-
.outer { 显示:表; ｝ 在{ 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ /*仅用于样式*/ 在{ 背景:# eee; 填充:0 20px; ｝ <！——需要两个父元素——> < div class = "外" > < div class = "内部" > < h3 >标题< / h3 > 示例看< p > < / p > < / div > < / div >
如果你需要相对对齐和DIV仍然不能给你你想要的，只是使用表格和设置valign = "bottom"在单元格你想要的内容对齐到底部。我知道这不是对你的问题的一个很好的回答，因为DIV应该取代表，但这是我最近对一个图像标题所做的，到目前为止它工作得完美无缺。
在与各种技巧斗争了几天之后，我不得不说这似乎是不可能的。即使使用javascript(我不想这样做)，这似乎是不可能的。
To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.
我想我将不得不重新审视这个项目的设计目标，除非有人有最后的建议。
