div不是全宽

Question

我有两个像这样的div

<div id="left"><p>.....</p><br/>
<p>.....</p>
</div>
<div id="right"><img ..../></div>

我有css。

#left
{
position: relative
float: left;
}


#right
{
position: relative
float: right;
}

右边div没有浮动到右边，因为左边的p元素没有为右边div元素提供空间，但是在CSS中我没有设置P这样的宽度：100％。如何使左宽度灵活？我不知道图像宽度，所以我不能在两个div上设置固定宽度。

Answer 1

p是一个块元素，因此它的100％宽度有点默认。您可以将其宽度设置为另一个值，或者仅浮动图像并且p不浮动（因此它将起到浮动应该如何工作的作用）。

Answer 2

您必须设置#left的宽度，否则无法解决问题。作为一种解决方法，我建议将#right div标记放在左边，然后将其向右浮动。在你的简单例子中，它运作良好。

其他选项是使用Javascript。你可以在加载时获得图像的宽度，然后按照惯例设置宽度，但这有点难看。

Answer 3

非浮动的块元素将作为出现在其下方的浮动元素的“天花板”。基本上，尝试这样的事情：

<div>
    <div id="right"><img .../></div>
    <p>......</p>
    <p>......</P>
</div>

Answer 4

在Doctype，这个问题似乎是一个很好的问题。