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

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

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


当前回答

以下是正确的解决方案:

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

其他回答

简单……在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清除。

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

要将任何元素放在其容器的底部,只需使用以下命令:

div {
    position: absolute;
    bottom: 0px;
}

很长一段时间以来,我也一直在寻找这个解决方案。 这是我得到的结果:

align-self: flex-end;

链接:https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ 但是,我不记得我是从哪里打开这个链接的。希望能有所帮助

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

position: absolute; 
bottom: 0;

...就这样了。

让它起作用的方法如下:

像往常一样将元素向左浮动 使用旋转父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度,使它们再次平直。瞧!他们浮到水底。