使用DIV& CSS

时间:2008-12-10 17:17:59

标签: html css

好的,如果有人能帮助我,我会非常感激。如果您复制并粘贴以下内容并在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旁边?

5 个答案:

答案 0 :(得分:7)

您看到所描述行为的原因是因为这些是您给予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>

答案 1 :(得分:3)

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

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

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:1)

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>

答案 4 :(得分:0)

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

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

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

寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1