我如何让一个div浮动到其容器的底部?

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

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

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

当前回答

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

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

.invisible {
float: left;  
}

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

2016-12-23 03:05:53

其他回答

如果你需要相对对齐和DIV仍然不能给你你想要的，只是使用表格和设置valign = "bottom"在单元格你想要的内容对齐到底部。我知道这不是对你的问题的一个很好的回答，因为DIV应该取代表，但这是我最近对一个图像标题所做的，到目前为止它工作得完美无缺。

2010-06-08 00:34:17

虽然这很复杂，但这是可能的。我在最新的Firefox和谷歌Chrome浏览器上检查了这段代码。旧的浏览器可能不支持css的shape-outside属性。欲了解更多细节，请参阅此参考资料。

2020-07-12 18:14:50

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

2014-11-27 12:57:13

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

To clarify for those who may not have understood - this is what I am looking for: in publishing it is quite common to layout an inset (picture, table, figure, etc.) so that its bottom lines up with the bottom of the last line of text of a block (or page) with text flowing around the inset in a natural manner above and to the right or left depending on which side of the page the inset is on. In html/css it is trivial to use the float style to line up the top of an inset with the top of a block but to my surprise it appears impossible to line up the bottom of the text and inset despite it being a common layout task.

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

2008-11-24 17:24:14

另一种解决方案是明智地使用表和行span。通过设置前一行的所有表格单元格(除了主要内容外)为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>

2012-01-02 21:24:38

我如何让一个div浮动到其容器的底部?

推荐文章

最新文章

标签