這個簡單的HTML，CSS佈局有什麼問題？

雖然這是一個非常簡單的HTML，CSS佈局，但我面臨着這個問題。它看起來不像我想要的那樣。這個簡單的HTML，CSS佈局有什麼問題？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <style> 
     body { 
      margin: 0; 
      padding: 100px; 
      width: 100%; 
     } 
     div.container { 
      border: 3px red solid; 
      padding: 10px; 
      display: block; 
      width: 1000px; 
     } 
     div.left, div.right { 
      float: left; 
      margin: 0 10px; 
     } 
     div.left { 
      background: blue; 
      height: 300px; 
      width: 300px; 

     } 
     div.right { 
      background: green; 
      width: 300px; 
      height: 300px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container">This is the main container 
     <div class="left">This is the left side</div> 
     <div class="right">This is the right side</div> 
    </div> 

    I want to know why left and right blocks overlaps the container element? 
</body> 
</html>

爲什麼左右塊與container元素重疊？

我上傳了在PC上執行的代碼的屏幕截圖。這裏是谷歌驅動器預覽鏈接：https://drive.google.com/open?id=0B4av_i4gqoZmRFpXbzVZekR0aGs&authuser=0

在此先感謝。

來源

2015-06-22 Arif Billah

在CSS文件中添加這種風格：

.container:before, 
.container:after { 
    display: table; 
    content: " "; 
} 

.container:after { 
    clear: both; 
}

這應該解決的問題！

來源

2015-06-22 18:56:36 Arqetech

這個簡單的HTML，CSS佈局有什麼問題？

回答

相關問題