文本浮动在CSS-div周围

时间:2013-09-22 14:38:55

标签: css css-float css-position

我有一个大div,里面有一个小div。 我希望较小的div位于大div的底部。 所以我使用“bottom:0px; left:0px; position:absolute;”定位了小div。 大div有“位置:相对;” 小div出现在它应该的位置,但文本不会浮动在它周围。 我试过“浮动:离开;”与显示器的各种替代方案相结合,但它似乎不起作用。

3 个答案:

答案 0 :(得分:0)

Float仅适用于相对位置。 当您将一个元素设置为Absolute时,它不会计为元素中的空格。

另外,要使float工作,你需要将set float放在它旁边的元素中。

答案 1 :(得分:0)

编辑:没有工作

为你的小div(在你的例子中为两者之间的div)创建一个包装器,并用绝对定位设置它,底部和左边为零宽度100%。

然后将你的小div放置:相对并浮动该div左移并向左清除。

我相信这应该有效。

答案 2 :(得分:0)

CSS位置(绝对/固定/相对)将元素带到上层,留下源顺序依赖层。

定位元素从不关心其他元素的显示绘制顺序。我没有看到一种方法来使定位和非定位元素一起反应并关注它们的绘画行为。

如果您需要像 [image]这样的解决方案,您可以使用浮动,但内容会插入文本。像:

div {
    font: 14px Arial;
    width:400px;
    margin:30px auto;
    border:1px solid #ccc;
    padding:20px;
    overflow:hidden;
    text-align:justify;

}

img {
    margin:10px 20px 0 0;
    float:left;
}

演示:http://jsfiddle.net/KY8FG/