使用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 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 2

当第一个div浮动到左边，因为如果这样做的第二个div被定位不存在（虽然第二个div内的任何文本都将围绕浮动div）。有关浮动元素行为的更多信息，请参阅the CSS2 specification。

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

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

Answer 3

添加overflow: auto; zoom: 1.0;到2格

这是不同的（在一定意义上更接近于什么要求）不是把float: left;二号DIV，因为它保留了第二个DIV扩大的宽度尽可能可能没有硬编码宽度值的权利。需要zoom: 1.0;才能在IE中给出元素布局。

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

你想要第二个div旁边漂浮到第一？然后你添加float:left到第二个div。

不要为清除创建另一个div，这是非常非语义的。

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

Answer 5

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