float:right我多次使用（或left）在容器顶部浮动图像和插入框。现在，我需要使用您使用的普通文本换行将 a 浮动div到另一个的右下角（仅在上方和左侧换行的文本）。divfloat
我认为这一定是相对容易的，即使float没有任何bottom价值，但我无法使用多种技术来做到这一点，并且除了使用绝对定位之外，在网络上搜索没有提出任何其他方法，但这并没有给出正确的自动换行行为。
我曾认为这将是一个非常常见的设计，但显然不是。如果没有人有建议，我将不得不将我的文本分成单独的框并div手动对齐，但这是相当不稳定的，我不想在需要它的每个页面上都这样做。
将父 div 设置为position: relative，然后将内部 div 设置为...
position: absolute;
bottom: 0;
......你去吧:)
使其工作的一种方法如下：
使用旋转父 div 180 度
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
JSfiddle：http: //jsfiddle.net/wcneY/
现在将所有向左浮动的元素（给它们一个类）旋转 180 度，使它们再次变直。瞧！它们浮到底部。
在与各种技术斗争了几天之后，我不得不说这似乎是不可能的。即使使用 javascript（我不想这样做），它似乎也不可能。
为了澄清那些可能不理解的人 - 这就是我正在寻找的：在出版中，布局插图（图片、表格、图形等）是很常见的，这样它的底部与最后一个的底部对齐块（或页面）的文本行，文本以自然的方式围绕插入物在上方和右侧或左侧流动，具体取决于插入物位于页面的哪一侧。在 html/css 中，使用浮动样式将 inset 的顶部与块的顶部对齐是微不足道的，但令我惊讶的是，尽管它是一种常见的布局任务，但似乎不可能对齐文本的底部和 inset .
我想我将不得不重新审视这个项目的设计目标，除非有人有最后一分钟的建议。
我在 JQuery 中通过在浮动右侧上方放置一个零宽度支柱元素来实现这一点，然后根据父高度减去浮动孩子的高度来调整支柱（或管道）的大小。
在 js 开始之前，我使用的是绝对位置方法，该方法有效，但允许文本在后面流动。因此，我切换到静态位置以启用支撑方法。（header 是父元素，cutout 是我想要的右下角，而 pipe 是我的支柱）
$("header .pipe").each(function(){
$(this).next(".cutout").css("position","static");
$(this).height($(this).parent().height()-$(this).next(".cutout").height());
});
CSS
header{
position: relative;
}
header img.cutout{
float:right;
position:absolute;
bottom:0;
right:0;
clear:right
}
header .pipe{
width:0px;
float:right
}
管道必须排在第一位，然后是切口，然后是 HTML 顺序中的文本。
这会在页面底部放置一个固定的 div，并在您向下滚动时固定到底部
#div {
left: 0;
position: fixed;
text-align: center;
bottom: 0;
width: 100%;
}
将 div 放入另一个 div 并将父 div 的样式设置为position:relative;然后在子 div 上设置以下 CSS 属性：position:absolute; bottom:0;
如果将父元素设置为位置：相对，则可以将子元素设置为底部设置位置：绝对；和底部：0；
#outer {
width:10em;
height:10em;
background-color:blue;
position:relative;
}
#inner {
position:absolute;
bottom:0;
background-color:white;
}<div id="outer">
<div id="inner">
<h1>done</h1>
</div>
</div>
如果您可以只将文本的最底部一行放在块的一侧（而不是完全在它周围和下方，如果不结束块并开始一个新块，您就无法做到这一点），那就是将块浮动到父块的底角之一并非不可能。如果您将一些内容放在块内的段落标签中，并希望将链接浮动到块的右下角，请将链接放在段落块内并将其设置为 float: right，然后放入带有 clear 的 div 标签: 都设置在段落标签的末尾。最后一个 div 是为了确保父标签围绕浮动标签。
<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>
我也找到了这个解决方案很长时间了。这就是我得到的：
对齐自我：flex-end；
链接：https ://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是，我不记得我是从哪里打开这个链接的。希望能帮助到你
如果您希望文本很好地换行：-
.outer {
display: table;
}
.inner {
height: 200px;
display: table-cell;
vertical-align: bottom;
}
/* Just for styling */
.inner {
background: #eee;
padding: 0 20px;
}<!-- Need two parent elements -->
<div class="outer">
<div class="inner">
<h3>Sample Heading</h3>
<p>Sample Paragragh</p>
</div>
</div>随着Flexbox的引入，这变得非常容易，无需太多黑客攻击。align-self: flex-end在子元素上将沿cross-axis 对齐。
.container {
display: flex;
}
.bottom {
align-self: flex-end;
}
<div class="container">
<div class="bottom">Bottom of the container</div>
</div>
输出：
.container {
display: flex;
/* Material design shadow */
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);
height: 100px;
width: 175px;
padding: 10px;
background: #fff;
font-family: Roboto;
}
.bottom {
align-self: flex-end;
}<div class="container">
<div class="bottom">Bottom of the container</div>
</div>我知道这东西很旧，但我最近遇到了这个问题。
使用绝对位置 div的建议真的很愚蠢，因为整个浮动的东西在绝对位置上有点失去意义..
现在，我没有找到一个通用的解决方案，但在很多情况下，prople 使用浮动 div 只是为了连续显示一些东西，比如一系列 span 元素。你不能垂直对齐。
要达到类似的效果，您可以这样做：不要让 div 浮动，而是将其 display 属性设置为inline-block. 然后你可以垂直对齐它，但它会让你满意。您只需要将父级的 div 属性设置vertical-align为top、bottom或middlebaseline
我希望这可以帮助某人
这现在可以通过 flex box 实现。只需将父 div 的 'display' 设置为 'flex' 并将 'margin-top' 属性设置为 'auto' 即可。这不会扭曲两个 div 的任何属性。
.parent {
display: flex;
height: 100px;
border: solid 1px #0f0f0f;
}
.child {
margin-top: auto;
border: solid 1px #000;
width: 40px;
word-break: break-all;
}<div class=" parent">
<div class="child">I am at the bottom!</div>
</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>
而且没有桌子......！
我只会做一张桌子。
<div class="elastic">
<div class="elastic_col valign-bottom">
bottom-aligned content.
</div>
</div>
和CSS：
.elastic {
display: table;
}
.elastic_col {
display: table-cell;
}
.valign-bottom {
vertical-align: bottom;
}
在行动中看到它：http:
//jsfiddle.net/mLphM/1/
我尝试了其中几种技术，以下对我有用，所以如果所有其他方法都失败了，那么试试这个，因为它对我有用:)。
<style>
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
bottom:-10;
}
</style>
<div id="footer" >Sportkin - the registry for sport</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;
}
使用 cssmargin-top属性将页脚设置到其容器的底部。并使用 css text-align-last属性将页脚内容设置在中心。
<div class="container" style="margin-top: 700px; text-align-last: center; ">
<p>My footer Here</p>
</div>
浮动和绝对定位的组合对我有用。我试图将消息的发送时间放在对话气泡的右下角。时间不应与消息正文重叠，除非确实有必要，否则它不会使气泡膨胀。
该解决方案的工作原理如下：
隐形浮动的目的是为可见的确保空间。
.speech-bubble {
font-size: 16px;
max-width: 240px;
margin: 10px;
display: inline-block;
background-color: #ccc;
border-radius: 5px;
padding: 5px;
position: relative;
}
.inline-time {
float: right;
padding-left: 10px;
color: red;
}
.giant-text {
font-size: 36px;
}
.tremendous-giant-text {
font-size: 72px;
}
.absolute-time {
position: absolute;
color: green;
right: 5px;
bottom: 5px;
}
.hidden {
visibility: hidden;
}<ul>
<li>
<span class='speech-bubble'>
This text is supposed to wrap the time <span> which always seats at the corner of this bubble.
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float.
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Easy, uh?
<span class='inline-time'>13:55</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Well, not <span class='giant-text'>THAT</span>
easy
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
The problem is, we can't tell the span to float to right AND bottom...
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
We can combinate float and absolute: use floated span to reserve space (the bubble will be inflated if necessary) so that the absoluted span is safe to go.
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
Make the floated span invisible.
<span class='inline-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
<span class='tremendous-giant-text'>See?</span>
<span class='inline-time hidden'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
<li>
<span class='speech-bubble'>
The giant text here is to simulate images which are common in a typical chat app.
<span class='tremendous-giant-text'>Done!</span>
<span class='inline-time hidden'>13:56</span>
<span class='absolute-time'>13:56</span>
</span>
</li>
</ul>如果您需要相对对齐并且 DIV 仍然无法满足您的需求，只需使用表格并在您希望内容与底部对齐的单元格中设置 valign = "bottom"。我知道这不是您问题的一个很好的答案，因为 DIV 应该替换表格，但这是我最近对图像标题所做的事情，到目前为止它工作得完美无缺。
我也尝试过之前发布的这个场景；
div {
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
绝对定位在加载页面时将 div 固定到浏览器的最低部分，但是当页面较长时向下滚动时，它不会随您滚动。我将定位更改为相对，并且效果很好。加载时 div 直接到达底部，因此在到达底部之前您实际上不会看到它。
div {
position: relative;
height:100px; /* Or the height of your image */
top: 100%;
margin-top: -100px;
}
一种有趣的方法是将几个右浮动元素堆叠在一起。
<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>
唯一的问题是，这仅在您知道盒子的高度时才有效。
Stu 的答案是迄今为止最接近工作的，但它仍然没有考虑到您的外部 div 的高度可能会根据文本在其中的换行方式而发生变化的事实。因此，仅重新定位内部 div（通过更改“管道”的高度）是不够的。这种变化必须发生在循环内，因此您可以不断检查您是否已经实现了正确的定位，并在需要时重新调整。
上一个答案中的 CSS 仍然完全有效：
#outer {
position: relative;
}
#inner {
float:right;
position:absolute;
bottom:0;
right:0;
clear:right
}
.pipe {
width:0px;
float:right
}
但是，Javascript 应该看起来更像这样：
var innerBottom;
var totalHeight;
var hadToReduce = false;
var i = 0;
jQuery("#inner").css("position","static");
while(true) {
// Prevent endless loop
i++;
if (i > 5000) { break; }
totalHeight = jQuery('#outer').outerHeight();
innerBottom = jQuery("#inner").position().top + jQuery("#inner").outerHeight();
if (innerBottom < totalHeight) {
if (hadToReduce !== true) {
jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() + 1) + 'px');
} else { break; }
} else if (innerBottom > totalHeight) {
jQuery(".pipe").css('height', '' + (jQuery(".pipe").height() - 1) + 'px');
hadToReduce = true;
} else { break; }
}
我知道这是一个非常古老的线程，但我仍然想回答。如果有人遵循下面的 css & html，那么它就可以工作。子页脚 div 将像胶水一样粘在底部。
<style>
#MainDiv
{
height: 300px;
width: 300px;
background-color: Red;
position: relative;
}
#footerDiv
{
height: 50px;
width: 300px;
background-color: green;
float: right;
position: absolute;
bottom: 0px;
}
</style>
<div id="MainDiv">
<div id="footerDiv">
</div>
</div>
虽然这很复杂，但这是可能的。我已经在最新的 Firefox 和 Google Chrome 浏览器上检查了这个代码。较旧的浏览器可能不支持 cssshape-outside属性。有关更多详细信息，请查看此参考。
window.addEventListener('load', function() {
var imageHolder = document.querySelector('.image-holder');
var containerHeight = document.querySelector('.container').offsetHeight;
var imageHolderHeight = imageHolder.offsetHeight;
var countPadding = containerHeight - imageHolderHeight;
imageHolder.style.paddingTop = countPadding + 'px';
containerHeight = document.querySelector('.container').offsetHeight;
var x1 = '0' + 'px ' + countPadding + 'px';
var x2 = imageHolder.offsetWidth + 'px' + ' ' + countPadding + 'px';
var x3 = imageHolder.offsetWidth + 'px' + ' ' + containerHeight + 'px';
var x4 = 0 + 'px' + ' ' + containerHeight + 'px';
var value = 'polygon(' + x1 + ',' + x2 + ',' + x3 + ',' + x4 + ')';
imageHolder.style.shapeOutside = value;
});.container {
width: 300px;
text-align: justify;
border: 1px solid black;
}
.image-holder {
float: right;
}<div class='container' style="">
<div class='image-holder' style=''>
<img class='bottom-right' style="width: 100px;" src="https://www.lwb.org.au/services/child-youth-and-family/static/b5cca79df7320248a77f6655a278190f/a6c62/img-index-banner.jpg" alt="">
</div>
<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error quasi ut ipsam saepe, dignissimos, accusamus debitis ratione neque doloribus quis exercitationem iure! Harum quisquam ipsam velit distinctio tempora repudiandae eveniet.</div>
</div>使用一些 JavaScript，我设法将一个浮动元素固定到其容器的底部 - 并且仍然让它浮动在文本中，这对于诸如 shape-outside 之类的东西非常有用。
浮动元素获得一个等于其容器的边距顶部，减去它自己的高度。这会保留浮动，将元素推到其容器的底部边缘并防止文本在元素下方流动。
const resizeObserver = new ResizeObserver(entries => {
if(entries.length == 0) return;
const entry = entries[0];
if(!entry.contentRect) return;
const containerHeight = entry.contentRect.height;
const imgHeight = imgElem.height;
const imgOffset = containerHeight - imgHeight;
imgElem.style.marginTop = imgOffset + 'px';
});
const imgElem = document.querySelector('.image');
resizeObserver.observe(imgElem.parentElement);
工作示例：https ://codepen.io/strarsis/pen/QWGXGVy
感谢 ResizeObserver 和对 JavaScript 的广泛支持，这似乎是一个非常可靠的解决方案。
试试这个 CSS+Javascript 解决方案。从右上角的浮动 div 开始。然后计算沿右边缘的零宽度 div 的高度，以将浮动 div 推到底部。此代码可能需要一些调整才能获得正确的高度。
<style>
#mainbox {border:4px solid red;width:500px;padding:10px;}
.rightpad {float:right;clear:right;padding:0;width:0;}
#floater {background-color:red;text-align:center;color:#FFF;width:300px;height:100px;float:right;margin-right:-10px;margin-top:10px;}
</style>
<script>
window.onload = function() {
var mmheight = document.getElementById("mainbox").clientHeight;
var ff = document.getElementById("floater");
var ffheight = ff.clientHeight;
var dd = document.createElement('div');
dd.className = "rightpad";
dd.style.height = (mmheight - ffheight - 20) * 1 + "px";
ff.parentNode.insertBefore(dd,ff);
}
</script>
<div id="mainbox">
<div id="floater" class="rightpad">123</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam posuere tellus et dolor vestibulum gravida. Donec vel nunc massa. Quisque quis varius libero. Fusce ut elementum magna. Praesent hendrerit diam sed velit rutrum mollis. Nunc pretium metus in tempus tempus. Quisque laoreet nibh eget volutpat dictum. Pellentesque libero ipsum, tristique et aliquam aliquam, accumsan sed sem. Phasellus facilisis sem eget mi tempus rhoncus.</p></div>
很老的问题，但仍然......您可以像这样将 div 浮动到页面底部：
div{
position: absolute;
height: 100px;
top: 100%;
margin-top:-100px;
}
你可以看到魔法发生在哪里。我认为您可以将其浮动到父 div 的底部。
position:absolute; bottom:0;通过添加到 CSS 中的 div ID，我在第一次尝试时就可以使用它。我没有添加父样式position:relative;。
它在 Firefox 和 IE 8 中都能完美运行，还没有在 IE 7 中尝试过。
另一种答案是明智地使用表格和行跨度。通过将前一行上的所有表格单元格（主要内容之一除外）设置为 rowspan="2"，您将始终在主表格单元格的底部获得一个单元格孔，您始终可以放置 valign="bottom"。
您还可以将其高度设置为一条线所需的最小值。因此，无论其余文本占用多少空间，您总是会在底部找到您最喜欢的文本行。
我尝试了所有 div 答案，但无法让他们做我需要的事情。
<table>
<tr>
<td valign="top">
this is just some random text
<br> that should be a couple of lines long and
<br> is at the top of where we need the bottom tag line
</td>
<td rowspan="2">
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
this<br/>
is really<br/>
tall
</td>
</tr>
<tr>
<td valign="bottom">
now this is the tagline we need on the bottom
</td>
</tr>
</table>
这是我的解决方案：
<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 文件中......在底部有“页脚”（或底部的 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 文件并将“侧边栏”浮动到左侧。然后让“内容”向右浮动，然后让“页脚”都清除。
那应该对我有用。
哦，年轻人……你在这里：
<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>
没有绝对的地位！反应灵敏！老套
您可以尝试使用宽度为 1px 的空元素并将其浮动。然后清除您实际要定位的元素并使用空元素的高度来控制它向下的距离。
http://codepen.io/cssgrid/pen/KNYrey/
.invisible {
float: left;
}
.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}
要将任何元素放在其容器的底部，只需使用以下命令：
div {
position: absolute;
bottom: 0px;
}