html - 使用 DIV 和 CSS

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

这依赖于除边框之外的所有内容的默认行为，通过 float 它，您告诉盒子将自己固定到左边距(它的父级，这里假定为主体)，而不管其他什么属于那里。 DIV 的默认宽度是父对象宽度的 100%(仍然是 body 标签)。默认位置是流中的下一个 block 元素——因为没有任何其他 block 元素，它与上边距垂直对齐。

然后您要求另一个 DIV 执行此操作:

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

本质上是一样的。在这里，你没有给 DIV 一个新的宽度或任何关于它们现在应该在布局中的位置的额外指令，所以它把自己固定到左边距，它的上边距找到最近的 block 元素固定到(仍然是 body ).

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

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