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

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

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

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

当前回答

以下是我的解决方案:

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

2012-02-17 14:44:24

其他回答

让它起作用的方法如下:

像往常一样将元素向左浮动使用旋转父div 180度 -moz-transform:旋转(180度); -webkit-transform:旋转(180度); -o-transform:旋转(180度); -ms-transform:旋转(180度); 过滤器:progid: DXImageTransform.Microsoft.BasicImage(旋转= 2); JSfiddle: http://jsfiddle.net/wcneY/ 现在将所有向左浮动的元素(给它们一个类)旋转180度，使它们再次平直。瞧!他们浮到水底。

2013-08-11 11:41:15

另一种解决方案是明智地使用表和行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

浮动和绝对定位的组合对我来说很有用。我试图把消息的发送时间放在语音气泡的右下角。时间不应该与消息体重叠，除非真的有必要，否则它不会使气泡膨胀。

解决方案是这样的:

有两个跨度，文本完全相同; 一个漂浮着，但看不见; 另一个是绝对定位到角落;

不可见的浮动对象的目的是保证可见对象的空间。

.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> This text is supposed to wrap the time which always seats at the corner of this bubble. 13:55 </li> <li> Absolute positioning doesn't work because it doesn't care if the two pieces of text overlap. We want to float. 13:55 </li> <li> Easy, uh? 13:55 </li> <li> Well, not THAT easy 13:56 </li> <li> See? 13:56 </li> <li> The problem is, we can't tell the span to float to right AND bottom... 13:56 </li> <li> 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. 13:56 </li> <li> See? 13:56 13:56 </li> <li> Make the floated span invisible. 13:56 </li> <li> See? 13:56 13:56 </li> <li> The giant text here is to simulate images which are common in a typical chat app. Done! 13:56 13:56 </li> </ul>

2020-07-02 18:55:09

以下是正确的解决方案:

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

2022-06-18 02:55:44

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

position: absolute; 
bottom: 0;

.．.就这样了。

2008-11-23 01:56:39

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

推荐文章

最新文章

标签