我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
A选择了@dave-kok这种方式。但只有当整个内容都适合而不需要滚动时，它才会起作用。如果有人能改进我将不胜感激
outer {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
}
.space {
float: right;
height: 75%;
}
.floateable {
width: 40%;
height: 25%;
float: right;
clear: right;
}
下面是代码http://jsfiddle.net/d9t9joh2/
其他回答
您可以尝试使用宽度为1px的空元素并将其浮动。然后清除您实际想要定位的元素，并使用空元素的高度来控制它向下移动的距离。
http://codepen.io/cssgrid/pen/KNYrey/
.invisible {
float: left;
}
.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}
一种有趣的方法是将两个右浮动元素堆叠在一起。
<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>
唯一的问题是，这只适用于你知道盒子的高度。
不确定，但之前发布的一个场景似乎可以工作，如果你在子div上使用position: relative而不是absolute。
#parent {
width: 780px;
height: 250px;
background: yellow;
border: solid 2px red;
}
#child {
position: relative;
height: 50px;
width: 780px;
top: 100%;
margin-top: -50px;
background: blue;
border: solid 2px green;
}
<div id="parent">
This has some text in it.
<div id="child">
This is just some text to show at the bottom of the page
</div>
</div>
而且没有桌子……!
以下是正确的解决方案:
.toBottomRight
{
display:inline-block;
position:fixed;
left:100%;
top:100%;
transform: translate(-100%, -100%);
white-space:nowrap;
background:red;
}
<div class="toBottomRight">Bottom-Right</div>
jsfiddle: https://jsfiddle.net/NickU/2k85qzxv/9/
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>
