Question

我有一个带有“侧边栏”文字的浮动div。它的父容器也有文本我不希望在我的浮动“侧边栏”div下面有文字：

example http://img864.imageshack.us/img864/6058/screenshot2011052613084xv.png

我该如何解决这个问题？

<div id="parent">
    <div id="floated" style="float:right">Foo bar</div>
    <h2>Foo</h2>
    <p>Text!</p>
</div>

Answer 1

如果它没有搞乱任何其他内容，您可以使用overflow: hidden或overflow: auto来解决此问题：

<div id="parent">
    <div id="floated" style="float:right">Foo bar</div>
    <div class="next-to-float" style="overflow: hidden;">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

请参阅http://jsfiddle.net/pauldwaite/YL5P3/

我在这里已经更全面地写了这个，包括让它在IE 6中运行的代码：xHTML/CSS: How to make inner div get 100% width minus another div width

我仍然不明白为什么 overflow: hidden这样做的原因，但我明白它确实遵循CSS规范。

Answer 2

在非浮动元素上设置右边距

JSFiddle

唯一的要求是必须预定义浮动元素的宽度。然后它可以有你喜欢的任何高度，非浮动内容（当应用右边距时）将不会在浮动元素下拉伸。

它是如何工作的？

我们在 width = X
我们有通常的内容，但设置了右边距= X + s ，其中s是您的内容和浮动元素之间的预定义空间，因此它们不会触及。

就是这样。

由于您有多个内容元素（头部，段落），您必须将它们放在具有此右边距设置的容器中。

<div id="parent">
    <div id="floated">Foo bar</div>
    <div id="content">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

和CSS：

#floated
{
    float: right;
    padding: 1em;
    background: #ccc;
    width: 10em;
}

#content
{
    margin-right: 13em; /* 10em width + 2 x 1em padding + 1em space */
}

为什么这种解决方案比设置主要内容宽度更好？

因为设置主内容宽度仅在您希望将文档内容限制为固定宽度（如960网格）时才有效。但是当您希望内容延伸到整个浏览器窗口宽度时，无论浏览器窗口大小如何，此解决方案都将正常工作。

和一个小建议

尽可能避免使用内联样式，因为应用程序/站点的可维护性将成为一场噩梦。

Answer 3

您可以在容器中嵌套2个div标签。将它们浮动并根据需要调整它们的大小。

Answer 4

在浮动元素上设置一个底边距，等于剩余部分的长度。或者向较大的元素添加宽度并将其向另一个方向浮动。

<div id="parent">
    <div id="floated" style="width:200px; float:right">Foo bar</div>
    <div id="content" style="width:600px; float:left">
        <h2>Foo</h2>
        <p>Text!</p>
    </div>
</div>

OR

<div id="parent">
    <div id="floated" style="width:200px; margin-bottom:200px; float:right">Foo bar</div>
    <h2>Foo</h2>
    <p>Text!</p>
</div>

Answer 5

简单地在[P]标签中添加宽度，请参见此处

示例

<div id="parent"> <div id="floated" style="float:right">Foo bar</div> <h2>Foo</h2> <p style=" width: 500px; ">Text!</p> </div>

例如你的（id =＆＃34; parent＆＃34;）宽度为800px

和（id =＆＃34;浮动＆＃34;）右侧栏的宽度为200px

然后使你的[P] 800px - 200px = 600px

所以将[P]宽度设置为600px

----------或

如果你想在文本和条之间留出一些空间，请[P]宽度为580px

对于空间来说意味着20px

Css - 不要想要浮动元素下面的元素

5 个答案:

在非浮动元素上设置右边距

它是如何工作的？

为什么这种解决方案比设置主要内容宽度更好？

和一个小建议