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

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

我认为即使float没有底值，这也必须相对容易，但是我无法使用多种技术来做到这一点，而且搜索网络除了使用绝对定位外没有其他办法，但这没有给出正确的自动换行行为。

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

编辑：只是给来到这里的人的便条。上面链接为重复项的问题实际上不是重复项。文本环绕inset元素的要求使其完全不同。实际上，这里对投票最高的答案的回答清楚地说明了为什么链接问题中的答案作为对此问题的回答是错误的。无论如何，似乎仍然没有解决此问题的通用方法，但是此处和链接的问题中发布的某些解决方案可能适用于特定情况。

将父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中，使用浮点样式将插图的顶部与块的顶部对齐很简单，但令我惊讶的是，尽管这是常见的布局任务，但似乎无法将文本的底部和插图对齐。

我想除非有人提出最后建议，否则我将不得不重新考虑该项目的设计目标。

我在JQuery中通过在浮动右上方放置零宽度的strut元素，然后根据父级高度减去浮动子级的高度来调整strut（或管道）的大小来实现这一点。

在开始使用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顺序中的文本。

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

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

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

如果您可以只将文本的最底行放在块的侧面（而不是完全围绕在块的下面，那么您必须先结束该块并开始一个新的块），并非不可能将一个块浮动到父块的底角之一。如果您将某些内容放在块内的段落标记中，并且想要浮动到该块右下角的链接，请将链接放置在段落块内，并将其设置为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>

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

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

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

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

使用绝对位置divs的建议确实很愚蠢，因为整个浮动对象都会失去绝对位置。

现在，我还没有找到一个通用的解决方案，但是在很多情况下，prople使用浮动div只是连续显示某些内容，例如一系列的span元素。而且您无法垂直对齐。

要实现类似的效果，您可以执行以下操作：不要使div浮动，而是将其display属性设置为inline-block。那么您可以将它垂直对齐，但是会令您满意。你只需要一套父母的DIV财产vertical-align要么top，bottom，middle或者baseline

我希望可以帮助某人

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

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

align-self：flex-end;

链接：https : //philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是，我不记得从哪里打开此链接。希望能帮助到你

我只是做一张桌子。

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

这是代码 http://jsfiddle.net/d9t9joh2/

现在可以使用flex box。只需将父div的“显示”设置为“ 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仍不能满足您的要求，则只需使用表格，然后在想要将内容底部对齐的单元格中设置valign =“ bottom”。我知道这不是对您的问题的好答案，因为DIV应该可以替换表格，但这是我最近使用图像标题所要做的，并且到目前为止，它一直没有问题。

我也尝试过早些时候发布的这种情况。

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

绝对位置将div加载到页面时将div固定在浏览器的最低位置，但是如果页面较长则向下滚动时，它不会随您滚动。我将定位更改为相对定位，效果很好。该div在加载时会直接移至底部，因此您直到到达底部才真正看到它。

div {
      position: relative;
      height:100px; /* Or the height of your image */
      top: 100%;
      margin-top: -100px;
}

一种有趣的方法是将几个正确的float元素堆叠在一起。

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

要使用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{
  position: absolute; 
  height: 100px; 
  top: 100%; 
  margin-top:-100px; 
}

您可以看到魔术发生的地方。我认为您可以将其浮动到父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文件，并使“侧栏”浮动到左侧。然后将“内容”浮动到右侧，然后将“页脚”清除。

应该可以的。对我来说。

我通过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>

您可以尝试使用一个宽度为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;
}