如何獲得寬度相加的100％的兩個DIV？

我有兩個DIV（Nav和Main）。當他們的寬度增加到100％時，第二個總是漂浮在第一個下面。如果我將第一個DIV的寬度更改爲19％，將第二個DIV的寬度更改爲79％，則它們並排浮動，但右側有2％的空白區域。如何獲得寬度相加的100％的兩個DIV？

我怎樣才能讓2個DIV並排坐在一起（即使在調整窗口大小後），以便它們合併填充頁面寬度的100％？

下面是代碼，它是在Chrome正在測試：

<html> 
 

 
<head> 
 
    <title>Space</title> 
 
    <style> 
 
    #header h1 { 
 
     text-align: center; 
 
     font-size: 40pt; 
 
     font-family: Century Gothic; 
 
    } 
 
    #header { 
 
     background: aqua; 
 
    } 
 
    #nav { 
 
     height: 100%; 
 
     width: 19%; 
 
     float: left; 
 
     background: lightblue; 
 
    } 
 
    #nav p { 
 
     font-size: 20pt; 
 
     font-family: Century Gothic; 
 
     color: yellow; 
 
    } 
 
    #main { 
 
     float: left; 
 
     padding-left: 20px; 
 
     background: linear-gradient(white, blue); 
 
     width: 79%; 
 
     height: 100%; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div id="header"> 
 
    <br> 
 
    <h1>All About Space</h1> 
 
    <br> 
 
    </div> 
 

 

 

 
    <div id="nav"> 
 
    <p>Mercury</p> 
 
    <p>Venus</p> 
 
    <p>Earth</p> 
 
    <p>Mars</p> 
 
    <p>Saturn</p> 
 
    <p>Jupiter</p> 
 
    <p>Uranus</p> 
 
    <p>Neptune</p> 
 
    </div> 
 

 

 

 
    <div id="main"> 
 
    <h3>This website is all about space</h3> 
 
    <img src="http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg" alt="" height="200px" width="400px"> 
 
    <p>Clicking on the links to the right and you will learn all about the planets of the solar system</p> 
 
    <p>Maybe one day we will all be able to visit some of them!</p> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2016-05-25 sw123456

添加一個包裝div作爲這些2 div的容器，並有display：flex包裝風格 –

問題就在這裏使用的是箱尺寸：內容複選框（默認值），所以你需要小心填充，保證金計算如果px在某個點使用不同的瀏覽器大小將打破布局。我們必須使用正確的百分比值，對於像填充，邊距，邊框等

* { 
    box-sizing: border-box; 
} 

#nav { 
    height: 100%; 
    width: 20%; 
    float: left; 
    background: lightblue; 
} 

#main { 
    float: left; 
    padding-left: 20px; 
    background: linear-gradient(white, blue); 
    width: 80%; 
    height: 100%; 
}

來源

2016-05-25 10:54:16

這太棒了！謝謝。你能否解釋爲什麼原始代碼不起作用，以及額外的盒子尺寸代碼的作用？謝謝 – sw123456

@ sw123456如何快速搜索「box-sizing」。見例如https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – Roope

這樣做，歡呼傢伙！ – sw123456

所有的佈局屬性這會給你預期的結果

#nav { 
    height: 100%; 
    width: 19%; 
    float: left; 
    background: lightblue; 
} 
#nav p { 
    font-size: 20pt; 
    font-family: Century Gothic; 
    color: yellow; 
} 
#main { 
    float: left; 

    background: linear-gradient(white, blue); 
    width: 81%; 
    height: 100%; 
} 
img{ 
    max-width:100%; 
}

刪除主DIV的padding-left，使IMG的max-width:100%

來源

2016-05-25 11:03:16 viveksinghggits

但他不會有他想要的填充...不完全*預期的結果* ... – Narxx

是的你是正確的，在這種情況下：）+ – viveksinghggits

如何獲得寬度相加的100％的兩個DIV？

回答

相關問題