如何让 div 浮动到其容器的底部？

Question

我多次使用 float:right （或 left）在容器顶部浮动图像和插入框。 现在，我需要将一个 div 浮动到另一个 div 的右下角，并使用 float 获得的普通文本换行（文本换行）仅在上方和左侧）。

我认为这一定是相对容易的，即使 float 没有 bottom 值，但我无法使用多种技术来做到这一点，并且搜索网络也没有做到这一点想出除使用绝对定位之外的任何方法，但这不会给出正确的自动换行行为。

我原以为这是一个非常常见的设计，但显然事实并非如此。 如果没有人提出建议，我将不得不将文本分成单独的框并手动对齐 div 但这是相当不稳定的，我不想在每个需要它的页面上都这样做。

Answer 1

将父 div 设置为 position:relative，然后将内部 div 设置为...

position: absolute; 
bottom: 0;

...就这样:)

Answer 2

使其工作的方法如下：

• 像平常一样向左浮动元素

• 使用

  将父 div 旋转 180 度

  -moz-transform:旋转(180deg); 
    -webkit-transform：旋转（180度）； 
    -o-变换：旋转（180度）； 
    -ms-变换：旋转（180度）； 
    过滤器：progid：DXImageTransform.Microsoft.BasicImage（旋转= 2）; 
    

  JSfiddle: http://jsfiddle.net/wcneY/

• 现在将所有向左浮动的元素（给它们一个类）旋转 180 度再次把它们摆直。 瞧！ 它们浮到底部。

Answer 3

在与各种技术斗争了几天之后，我不得不说这似乎是不可能的。 即使使用javascript（我不想这样做），这似乎也是不可能的。

为了向那些可能不理解的人澄清 - 这就是我正在寻找的：在出版中，布局插图（图片、表格、图形等）使其底部与最后一个的底部对齐是很常见的块（或页面）的文本行，文本以自然方式围绕插图在上方、右侧或左侧流动，具体取决于插图位于页面的哪一侧。 在 html/css 中，使用浮动样式将插图的顶部与块的顶部对齐是很简单的，但令我惊讶的是，尽管这是一项常见的布局任务，但似乎不可能对齐文本和插图的底部。

我想我将不得不重新审视这个项目的设计目标，除非有人在最后一刻提出建议。

Answer 4

我在 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

}

管道必须排在第一位，然后是 cutout，然后是 HTML 顺序中的文本。

Answer 5

这会在页面底部放置一个固定的 div，并在向下滚动时固定到底部

#div {
    left: 0;
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
}

Answer 6

将 div 放入另一个 div 中，并将父 div 的样式设置为 position:relative; 然后在子 div 上设置以下 CSS 属性： position:absolute; 底部：0；

Answer 7

随着 Flexbox 的引入，这已经变得相当容易，不需要太多的黑客攻击。 align-self: flex-end<子元素上的 /a> 会将其沿 交叉轴< /a>.

.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>

Answer 8

如果将父元素设置为position:relative，则可以将子元素设置为底部设置position:absolute; 和底部：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>
  

Answer 9

如果您同意仅将文本的最底行移至块的一侧（而不是完全位于其周围和下方，如果不结束块并开始新的块，您就无法做到这一点），那么它是将块浮动到父块的底角之一并非不可能。 如果您将一些内容放在块内的段落标记中，并希望将链接浮动到块的右下角，请将链接放在段落块内并将其设置为 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>

Answer 10

我也已经找到这个解决方案很长时间了。
这就是我得到的：

align-self: flex-end;

链接： https://philipwalton.github.io/solved-by- Flexbox/演示/垂直居中/
但是，我不记得从哪里打开此链接。 希望能帮助到你

Answer 11

如果您希望文本很好地换行：-

.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>

Answer 12

目前这是不可能的。 有不同的方法可以解决将内容与底部边缘对齐的问题（flex、grid、table、a​​bsolute）。 然而，这些方法不尊重浮动，因此内容不会围绕这些元素流动。

如果浏览器和 csswg 就定义达成一致，有一天浮动元素可以通过 css 实现。

高级资源：

https://drafts.c​​sswg.org/css-page- floats/#float-property

https://github.com/w3c/ CSSWG-草稿/问题/1251

Answer 13

现在可以通过弹性盒实现这一点。
只需将父 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>

Answer 14

我知道这个东西很旧，但我最近遇到了这个问题。

使用绝对位置div的建议真的很愚蠢，因为整个浮动的事情有点失去绝对位置的意义..

现在，我没有找到通用的解决方案，但在很多情况下正确使用浮动div只是为了连续显示某些内容，例如一系列跨度元素。 而且你不能垂直对齐它。

要达到类似的效果，您可以这样做：不要使 div 浮动，而是将其显示属性设置为 inline-block。 然后你可以按照你喜欢的方式垂直对齐它。 您只需将父级的 div 属性 vertical-align 设置为 top、bottom、middle 或 基线

我希望对某人有帮助

Answer 15

一种有趣的方法是将几个右浮动元素堆叠在一起。

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

唯一的问题是，这仅在您知道盒子的高度时才有效。

Answer 16

我只想做一张桌子。

<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/

Answer 17

我尝试了其中的几种技术，以下技术对我有用，所以如果这里的所有其他技术都失败了，那么请尝试这个，因为它对我有用:)。

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

Answer 18

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/

Answer 19

不确定，但如果您在子 div 上使用 position:relative 而不是绝对，之前发布的场景似乎可以工作。

#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>

而且没有桌子...！

Answer 20

使用 css margin-top 属性将页脚设置到其容器的底部。 并使用 css text-align-last 属性将页脚内容设置在中心。

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

Answer 21

浮动定位和绝对定位的结合对我来说很有效。 我试图将消息的发送时间放在语音气泡的右下角。 时间绝不能与消息正文重叠，除非确实有必要，否则不会使气泡膨胀。

该解决方案的工作原理如下：

1. 有两个具有相同文本的跨度；
2. 一个是漂浮但不可见的；
3. 另一个绝对位于角落；

不可见浮动的目的是为了保证可见浮动的空间。

.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>

Answer 22

这是正确的解决方案：

.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/< /a>

Answer 23

如果您需要相对对齐，但 DIV 仍然无法提供您想要的内容，只需使用表格并在您希望内容对齐到底部的单元格中设置 valign = "bottom" 即可。 我知道这不是你问题的一个很好的答案，因为 DIV 应该取代表格，但这是我最近必须对图像标题所做的事情，并且到目前为止它工作得完美无缺。

Answer 24

我也尝试过之前发布的这个场景；

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;
}

Answer 25

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; }
}

Answer 26

我知道这是一个非常古老的话题，但我仍然想回答。 如果有人遵循下面的 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>

Answer 27

虽然这很复杂但是是可能的。 我已经在最新的 Firefox 和 Google Chrome 浏览器上检查了此代码。 较旧的浏览器可能不支持 css shape-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>

Answer 28

通过一些 JavaScript，我设法将浮动元素固定到其容器的底部 - 并且仍然使其浮动在文本中，这对于诸如外部形状之类的内容非常有用。

浮动元素分配的 margin-top 等于它的容器，减去它自己的高度。 这会保留浮动，将元素推到其容器的底部边缘，并防止文本在元素下方流动。

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 的广泛支持这似乎是一个非常可靠的解决方案。

Answer 29

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

Answer 30

很老的问题，但仍然......
您可以将 div 浮动到页面底部，如下所示：

div{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

您可以看到神奇的地方。 我认为你可以做同样的事情来将其浮动到父 div 的底部。