Question

好的，如果有人能帮助我，我会非常感激。如果您复制并粘贴以下内容并在IE或Firefox中打开

<div style="border: solid 1px navy; float: left;">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>
<div style="background-color: blue;">
    <p>Some Text</p>
    <p>Another paragraph</p>
</div>

为什么具有蓝色背景的第二个div扩展到包含项目列表的第一个div后面？如何让它真正漂浮在第一个div旁边？

Answer 1

您看到所描述行为的原因是因为这些是您给予DIV的指示。

让我们分解一下：

<div style="border: solid 1px navy; float: left;">

这依赖于除边框之外的所有内容的默认行为，并且通过浮动它，你告诉框将自己固定到左边距（它的父节点，这被认为是这里的主体），不管其他什么属于那里。 DIV的默认宽度是父对象宽度的100％（仍然是body标签）。默认位置是流中的下一个块元素 - 因为没有任何其他块元素，它与上边距垂直对齐。

然后你问另一个DIV这样做：

<div style="background-color: blue; float:left;">

这基本上是一回事。在这里，你没有给DIV一个新的宽度或任何关于它们现在应该在布局中的位置的附加指令，所以它将自己固定到左边距并且它的上边距找到最接近的块元素（仍然是正文））。

要让它们并排排列，请执行以下操作：

  <style type="text/css">
    .leftBox, .rightBox
    {
       width: 48%; /*leave some room for varying browser definitions */
       border: 1px solid navy;
       float: left;
       display: inline; /* follow the semantic flow of the page and don't break the line */
       clear: left; /* don't allow any other elements between you and the left margin */
     }

    .rightBox
    {
       border: none;
       background-color: blue;
       clear: right;
    }
</style>
<div class="leftBox">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
</div>
<div class="rightBox">
    <p>
        some other text</p>
</div>

Answer 2

如果您希望蓝色框位于列表旁边，则还需要将其浮动：

<div style="border: solid 1px navy; float: left;">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>
<div style="background-color: blue; float:left;"><p>Some Text</p><p>Another paragraph</p></div>

Answer 3

当第一个div浮动到左侧时，第二个div的位置就好像它不存在一样（尽管第二个div中的任何文本都将围绕浮动的div流动）。有关浮动元素行为的更多信息，请参阅the CSS2 specification。

要让第二个div在第一个div旁边浮动，可以将float: left添加到第二个div。

或者，如果已知第一个div的宽度，则可以向第二个div添加左边距。

Answer 4

将overflow: auto; zoom: 1.0;添加到第二个div

这与将float: left;放在第二个div上有所不同（在某种意义上更接近于问题）因为它保留了第二个div的宽度尽可能向右扩展而没有硬编码宽度值。在IE中提供元素布局需要zoom: 1.0;。

<div style="border: solid 1px navy; float: left;">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
</div>
<div style="background-color: blue; overflow: auto; zoom: 1.0;"><p>Some Text</p><p>Another paragraph</p></div>

Answer 5

你希望第二个div在第一个旁边浮动吗？然后将float:left添加到第二个div。

不要创建另一个纯粹用于清除的div，这非常非语义。

编辑：overflow: auto不适用于IE，你需要在这种情况下给出div hasLayour，这涉及添加zoom:1.0或强制你可能无法做到的固定维度。当存在有效的解决方案时，请不要破解。你希望它浮动，使用浮动。

使用DIV＆amp; CSS

5 个答案: