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

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

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


当前回答

目前这是不可能的。有不同的方法来解决将内容对齐到底边(flex, grid, table, absolute)。然而,这些方法不尊重float,因此内容不会围绕这些元素流动。

如果有一天浏览器和csswg对浮动元素的定义达成一致,那么在css中浮动元素就有可能实现。

先进的资源:

https://drafts.csswg.org/css-page-floats/#float-property

https://github.com/w3c/csswg-drafts/issues/1251

其他回答

使用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上使用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浮动到页面底部:

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

你可以看到奇迹发生的地方。我认为你可以做同样的浮动到一个父div的底部。

我尝试了其中的几种方法,下面的方法对我来说很有效,所以如果其他方法都失败了,那就试试这个吧,因为它对我很有效。

<style>
  #footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
    bottom:-10;
  }
</style>

<div id="footer" >Sportkin - the registry for sport</div>

一种有趣的方法是将两个右浮动元素堆叠在一起。

<div>
<div style="float:right;height:200px;"></div>
<div style="float:right;clear:right;">Floated content</div>
<p>Other content</p>
</div>

唯一的问题是,这只适用于你知道盒子的高度。