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