我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在，我需要浮动一个div到另一个div的右下角与正常的文本包装，你得到的浮动(文本包装上面和左边只有)。
我认为这一定是相对容易的，即使浮动没有底部值，但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位，但这并没有给出正确的换行行为。
我原以为这是一种很常见的设计，但显然不是。如果没有人有建议，我将不得不把我的文本分解成单独的盒子，并手动对齐div，但这是相当不稳定的，我不想在每个需要它的页面上都这样做。
当前回答
使用css的margin-top属性，目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
其他回答
一种有趣的方法是将两个右浮动元素堆叠在一起。
<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>
唯一的问题是，这只适用于你知道盒子的高度。
随着Flexbox的引入，这变得非常容易，不需要太多的黑客。align-self:子元素的flex-end将沿着交叉轴对齐。
.container {
display: flex;
}
.bottom {
align-self: flex-end;
}
<div class="container">
<div class="bottom">Bottom of the container</div>
</div>
输出:
.container { 显示:flex; /*材质设计阴影*/ Box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14)， 0 3px 1px -2px rgba(0,0,0,0.2)， 0 1px 5px 0 rgba(0,0,0,0.12); 身高:100 px; 宽度:175 px; 填充:10 px; 背景:# fff; 字体类型:Roboto; ｝ .bottom { align-self: flex-end; ｝ < div class = "容器" > <div class="bottom">容器底部</div> < / div >
以下是我的解决方案:
<style>
.sidebar-left{float:left;width:200px}
.content-right{float:right;width:700px}
.footer{clear:both;position:relative;height:1px;width:900px}
.bottom-element{position:absolute;top:-200px;left:0;height:200px;}
</style>
<div class="sidebar-left"> <p>content...</p></div>
<div class="content-right"> <p>content content content content...</p></div>
<div class="footer">
<div class="bottom-element">bottom-element-in-sidebar</div>
</div>
简单……在HTML文件....将“footer”(或你想要在底部的div)放在底部。所以不要这样做:
<div id="container">
<div id="Header"></div>
<div id="Footer"></div>
<div id="Content"></div>
<div id="Sidebar"></div>
</div>
这样做:(把页脚放在下面。)
<div id="container">
<div id="Header"></div>
<div id="Content"></div>
<div id="Sidebar"></div>
<div id="Footer"></div>
</div>
这样做之后，你可以打开css文件，让“边栏”浮动到左边。然后将content浮动到右边，然后将footer清除。
这应该有用。对我来说是这样。
如果你想要文本包装漂亮:-
.outer { 显示:表; ｝ 在{ 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ /*仅用于样式*/ 在{ 背景:# eee; 填充:0 20px; ｝ <！——需要两个父元素——> < div class = "外" > < div class = "内部" > < h3 >标题< / h3 > 示例看< p > < / p > < / div > < / div >
