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

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

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

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

当前回答

通过一些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的广泛支持，这似乎是一个非常可靠的解决方案。

2021-03-19 12:24:10

其他回答

在与各种技巧斗争了几天之后，我不得不说这似乎是不可能的。即使使用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

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

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

让它起作用的方法如下:

像往常一样将元素向左浮动使用旋转父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

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

解决方案是这样的:

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

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

.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

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

推荐文章

最新文章

标签