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

Question

我使用float：right（或left）多次浮动容器顶部的图像和嵌入框。最近我需要在另一个div的右下角浮动一个div，并使用float得到的正常文本换行（文本包含在上方和左侧）。

我认为这必须相对容易，即使浮点数没有底价但是我无法使用多种技术来做到这一点并且搜索网络除了使用绝对定位之外没有其他任何东西但是这个没有给出正确的自动换行为。

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

编辑：对于任何来这里的人来说都是一张纸条。上面作为重复链接的问题实际上并不重复。文本环绕inset元素的要求使它完全不同。事实上，这里对最高投票答案的回应清楚地表明为什么相关问题的答案作为对这个问题的回答是错误的。无论如何，这个问题似乎仍然没有一般解决方案，但是这里和链接问题中发布的一些解决方案可能适用于特定情况。

Answer 1

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

position: absolute; 
bottom: 0;

...然后你去：）

Answer 2

使其成功的方法如下：

• 像往常一样将您的元素浮动

• 使用

  将父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度，再将它们笔直放置。瞧！它们漂浮在底部。

Answer 3

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

为那些可能没有理解的人澄清 - 这就是我正在寻找的东西：在发布时，布局插图（图片，表格，图形等）以使其底部与底部对齐是很常见的块（或页面）的最后一行文本，其中文本以自然方式围绕插入物在上方和右侧或左侧流动，这取决于插入页面的哪一侧。在html / css中，使用浮动样式将嵌入的顶部与块的顶部对齐是微不足道的，但令我惊讶的是，尽管它是常见的布局任务，但似乎无法排列文本的底部和插入

我想我必须重新审视这个项目的设计目标，除非有人有最后一分钟的建议。

Answer 4

我已经在JQuery中实现了这一点，方法是在浮动右上方放置零宽度支撑元素，然后根据父高度减去浮动子高度来调整支柱（或管道）的大小。

在js踢之前，我正在使用位置绝对方法，它可以工作，但允许后面的文本流。因此，我切换到静态位置以启用支柱方法。 （标题是父元素，剪切是我想要右下角，管道是我的支柱）

$("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命令中的文本。

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; bottom:0;

Answer 7

如果你没有问题只有文本的最底部的一行到达块的一侧（而不是完全在它周围和下面，你不能没有结束块并开始一个新的），将块浮动到父块的一个底角并非不可能。如果你把一些内容放在一个块的一个段落标签中，并希望将一个链接浮动到块的右下角，把链接放在段落块中并将其设置为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 8

如果您希望文本很好地包装： -

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

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

使用绝对位置div 建议真的很傻，因为整个浮动的东西有点绝对的位置......

现在，我没有找到一个通用的解决方案，但在很多情况下，人们使用浮动div只是为了显示连续的东西，比如一系列span元素。而且你不能垂直对齐那个。

要实现类似的效果，你可以这样做：不要使div浮动，而是将它的display属性设置为inline-block。然后你可以垂直对齐，但它会让你高兴。你只需要将父的div属性vertical-align设置为top，bottom，middle或baseline

我希望能帮到某人

Answer 10

随着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>

Answer 11

如果将父元素设置为position：relative，则可以将子元素设置为底部设置位置：absolute;和底部：0;

＆＃13;

＆＃13;

#outer {
  width:10em;
  height:10em;
  background-color:blue;
  position:relative; 
}

#inner {
  position:absolute;
  bottom:0;
  background-color:white; 
}

＆＃13;

<div id="outer">
  <div id="inner">
    <h1>done</h1>
  </div>
</div>
  

＆＃13;

＆＃13;

＆＃13;

Answer 12

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

align-self：flex-end;

链接：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是，我无法记住我打开此链接的位置。希望它有所帮助

Answer 13

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 14

我尝试了其中几种技术，以下工作对我来说，所以如果其他所有其他方法都失败了那么试试这个，因为它对我有用:)。

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

我会做一张桌子。

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

现在可以使用弹性盒。 只需设置＆＃39;显示＆＃39;父母div为＆＃39; flex＆＃39;并设置＆＃39; margin-top＆＃39;属于＆＃39; auto＆＃39;。 这不会扭曲div的任何属性。

＆＃13;

＆＃13;

.parent {
  display: flex;
  height: 100px;
  border: solid 1px #0f0f0f;
}
.child {
  margin-top: auto;
  border: solid 1px #000;
  width: 40px;
  word-break: break-all;
}

＆＃13;

<div class=" parent">
  <div class="child">I am at the bottom!</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 17

我尝试了之前发布的这个场景;

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 18

不确定，但如果你在子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 19

通过一些 JavaScript，我设法将一个浮动元素固定到其容器的底部 - 并且仍然让它浮动在文本中，这对于诸如 shape-outside 之类的事情非常有用。

浮动元素获得一个等于其容器的 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 20

您可以尝试使用宽度为1px的空元素并将其浮动。然后清除您实际想要定位的元素，并使用空元素的高度来控制它向下走多远。

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

Answer 21

使用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 22

浮动定位和绝对定位相结合可以为我完成工作。我试图将消息的发送时间放在气泡的右下角。时间永远不应该与消息主体重叠，除非真正必要，否则它不会使泡沫膨胀。

解决方案如下：

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 &lt;span&gt; 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 23

尽管这很复杂，但是有可能。我已经在最新的Firefox和Google Chrome浏览器上检查了此代码。旧版浏览器可能不支持css shape-outside属性。有关更多详细信息，check this reference。

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 24

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

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

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

你可以看到神奇发生的地方。我认为你可以将它漂浮到父div的底部。

Answer 27

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

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

唯一的问题是，只有当你知道盒子的高度时，这才有效。

Answer 28

如果你需要相对对齐而DIV仍然没有给你你想要的东西，只需使用表格并在你希望内容与底部对齐的单元格中设置valign =“bottom”。我知道这对你的问题不是一个很好的答案，因为DIV应该替换表格，但这是我最近用图像标题做的事情，到目前为止它已经完美无缺。

Answer 29

简单......在html文件中正确....有＆＃34;页脚＆＃34; （或底部想要的div）底部。所以不要这样做：

<div id="container">
    <div id="Header"></div>
    <div id="Footer"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
</div>

DO THIS :(将页脚放在下面。）

<div id="container">
    <div id="Header"></div>
    <div id="Content"></div>
    <div id="Sidebar"></div>
    <div id="Footer"></div>
</div>

执行此操作后，您可以转到css文件，并使用＆＃34;侧边栏＆＃34;漂浮到左边。然后有＆＃34;内容＆＃34;向右浮动，然后有＃34;页脚＆＃34;两个都清楚。

应该为我工作。

Answer 30

这是我的解决方案：

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

Answer 31

哦，年轻人。...你在这里

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

无绝对位置！ 反应灵敏！ 老学校

Answer 32

另一个答案是明智地使用表和rowspan。通过将前一行中的所有表格单元格（主要内容除外）设置为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>

Answer 33

我在第一次尝试时将position:absolute; bottom:0;添加到CSS内的div ID。我没有添加父样式position:relative;。

它在Firefox和IE 8中都运行良好，尚未在IE 7中尝试过。

Answer 34

要将任何元素放在其容器的底部，只需使用它：

div {
    position: absolute;
    bottom: 0px;
}