我曾多次使用float:右(或左)将图像和嵌入框浮动在容器顶部。现在,我需要浮动一个div到另一个div的右下角与正常的文本包装,你得到的浮动(文本包装上面和左边只有)。

我认为这一定是相对容易的,即使浮动没有底部值,但我还没有能够做到这一点使用一些技术和搜索网络还没有出现任何其他使用绝对定位,但这并没有给出正确的换行行为。

我原以为这是一种很常见的设计,但显然不是。如果没有人有建议,我将不得不把我的文本分解成单独的盒子,并手动对齐div,但这是相当不稳定的,我不想在每个需要它的页面上都这样做。


当前回答

这是现在可能的flex box。 只需设置父div的“display”为“flex”,并设置“margin-top”属性为“auto”。 这不会扭曲两个div的任何属性。

.parent { 显示:flex; 身高:100 px; 边框:1px #0f0f0f; } .child { margin-top:汽车; 边框:实心1px #000; 宽度:40像素; 单词分割:打破所有; } <div class=" parent"> <div class="child">我在底部!< / div > < / div >

其他回答

设置父div为position: relative,然后内部div为…

position: absolute; 
bottom: 0;

...就这样了。

很长一段时间以来,我也一直在寻找这个解决方案。 这是我得到的结果:

align-self: flex-end;

链接:https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是,我不记得我是从哪里打开这个链接的。希望能有所帮助

将div放在另一个div中,并设置父div的样式为position:relative;然后在子div上设置以下CSS属性:位置:绝对;底部:0;

让它起作用的方法如下:

像往常一样将元素向左浮动 使用旋转父div 180度 -moz-transform:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); 过滤器:progid: DXImageTransform.Microsoft.BasicImage(旋转= 2); JSfiddle: http://jsfiddle.net/wcneY/ 现在将所有向左浮动的元素(给它们一个类)旋转180度,使它们再次平直。瞧!他们浮到水底。

试试这个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>