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

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

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

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

当前回答

简单……在HTML文件....将“footer”(或你想要在底部的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文件，让“边栏”浮动到左边。然后将content浮动到右边，然后将footer清除。

这应该有用。对我来说是这样。

2015-02-13 22:34:33

其他回答

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

2020-07-12 18:14:50

这是现在可能的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 >

2016-01-23 05:52:16

If you're okay with only the bottom-most line of the text going to the side of the block (as opposed to completely around and underneath it, which you can't do without ending the block and starting a new one), it's not impossible to float a block to one of the bottom corners of a parent block. If you put some content in a paragraph tag within a block and want to float a link to the bottom right corner of the block, put the link within the paragraph block and set it to float: right, then put in a div tag with clear: both set just underneath the end of the paragraph tag. The last div is to make sure the parent tag surrounds the floated tags.

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

2010-04-16 06:21:38

不确定，但之前发布的一个场景似乎可以工作，如果你在子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>

而且没有桌子……!

2010-06-08 14:10:54

另一种解决方案是明智地使用表和行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浮动到其容器的底部?

推荐文章

最新文章

标签