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

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

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


当前回答

您可以尝试使用宽度为1px的空元素并将其浮动。然后清除您实际想要定位的元素,并使用空元素的高度来控制它向下移动的距离。

http://codepen.io/cssgrid/pen/KNYrey/

.invisible {
float: left;  
}

.bottom {
float: left;
padding-right: 35px;
padding-top: 30px;
clear: left;
}

其他回答

以下是我的解决方案:

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

很老的问题,但仍然…… 你可以像这样将一个div浮动到页面底部:

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

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

哦,年轻人…给你:

<div class="block">
    <a href="#">Some Content with a very long description. Could be a Loren Ipsum or something like that.</a>
    <span>
        <span class="r-b">A right-bottom-block with some information</span>
    </span>
    <span class="clearfix"></span>
</div>
<style>
    .block {
        border: #000 solid 1px;
    }

    .r-b {
        border: #f00 solid 1px;
        background-color: fuchsia;
        float: right;
        width: 33%
    }

    .clearfix::after {
        display: block;
        clear: both;
        content: "";
    }
</style>

没有绝对的立场! 响应! 版的

使用css的margin-top属性,目的是将页脚设置为容器的底部。并使用css text-align-last属性将页脚内容设置在中心。

 <div class="container" style="margin-top: 700px;  text-align-last: center; ">
      <p>My footer Here</p>  
 </div>

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