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

这依赖于除边框之外的所有内容的默认行为,并且通过浮动它,您告诉框将自身固定到左边距(它的父节点,这被假定为此处的主体),无论其他属于哪个.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>