如何在CSS中安排div容器？

Question

所以，我有我的網站的幾個DIV容器，它們垂直堆疊如下： ，我希望它看起來更像是這樣的： 我的HTML看起來像這樣：

<div id="main"> 
      <div id="header"> 
      </div> 
      <div id="content"> 
       <div id="game" class="box"> 
        <canvas data-processing-sources="hello-web.pde"></canvas> 
       </div> 
       <div id="desc_down"> <!-- Description and Downloads --> 
        <div id="desc" class="box"> <!-- Description --> 

        </div> 
        <div id="down"> <!-- Downloads --> 
         <div id="windows" class="box"> 
         </div> 
         <div id="mac" class="box"> 
         </div> 
         <div id="linux" class="box"> 
         </div> 
         <div id="code" class="box"> 
         </div> 
         <div id="info" class="box"> 
         </div> 
        </div> 
       </div> 
       <div id="screenshots" class="box"> 

       </div> 
       <div id="tech_about"> 
        <div id="tech" class="box"> 

        </div> 
        <div id="about" class="box"> 

        </div> 
       </div> 
      </div> 
     </div> 
    <div> 

和我這樣的CSS：

#main { 
    max-width: 1280px; 
    width: 90%; 
    margin: 0 auto; 
    background-color: #b0e0e6; /* all colours temp */ 
} 

#header, #content, #game, #desc_down, #screenshots, #tech_about, #info { 
    width: 100%; 
} 
#desc { 
    width: 60%; 
} 
#down { 
    width: 40%; 
} 
#windows, #mac, #linux, #code { 
    width: 50%; 
} 
#about { 
    width: 45%; 
} 
#tech { 
    width: 50%; 
} 
.box { 
    background-color: #FFFFFF; 
    border: 5px solid; 
    border-color: #000000; 
    height: 200px; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

這些盒子的高度可以和將會改變。我想知道如何讓我的網站看起來像它想要的樣子。謝謝。

Answer 1

它很簡單。將容器div（包含所有這些div塊）的寬度設置爲某個值。

然後給予float：留給所有內部div。

Answer 2

製作全部float:left或display:inline-block。 或更好地使用像Bootstrap Grid system

Answer 3

有無數的方法來定位您的內容。這裏是一個使用浮動可以實現的例子。

Have an example!

HTML

<div id="wrap"> 
    <div id="header"></div> 
    <div id="paneOne"></div> 
     <div class="minPane"></div> 
     <div class="minPane"></div> 
     <div class="minPane"></div> 
     <div class="minPane"></div> 
     <div id="wideMinPane"></div> 
    <div id="afterMini"></div> 
</div> 

CSS

#wrap { 
    width: 800px; 
    margin: 0 auto; 
} 
#header { 
    height: 200px; 
    background: #F00; 
} 
#paneOne { 
    width: 400px; 
    height: 500px; 
    background: #000; 
    float: left; 
} 
.minPane { 
    float: left; 
    width: 198px; 
    height: 200px; 
    background: #FF0; 
    border: solid 1px #000; 
} 
#wideMinPane { 
    float: left; 
    background: #F00; 
    border: solid 1px #000; 
    height: 90px; 
    background: #FF0; 
    width: 398px; 
} 
#afterMini { 
    height: 300px; 
    background: #F00; 
    clear: left; 
}