如何在html中製作兩個垂直列

Question

有沒有辦法讓一行中有兩個div或者有兩列div。它顯示爲一個div，而不是div旁邊的div。

CSS

#tacoh { 
margin: 200px 20% 40px 0; 
float:right; 
} 

#hamburgerh { 
margin: 200px 40px 0 20% ; 
float:left; 
} 

HTML

<div id="hamburgerh" style="width:300px;height:350px;"></div> 
<div id="tacoh" style="width:300px;height:350px;"></div> 

Answer 1

您可以設定一個浮動留給雙方的div：

​​

或將它們包裝成一個容器馬呂斯巴拉伊建議：

.container { 
    width:100%; 
    margin: 200px 0 40px; 
} 

#tacoh { 
margin: 200px 20% 40px 0; 
float:left; 
} 

#hamburgerh { 
margin: 200px 40px 0 20% ; 
float:left; 
} 

與以下html：

<div class="container"> 
    <div id="hamburgerh" style="width:300px;height:350px;"></div> 
    <div id="tacoh" style="width:300px;height:350px;"></div> 
</div> 

此外，由於你的風格是兩個div的一樣，你也可以創建一個類爲他們象下面這樣：

.w_300_h_350{ 
    width:300px; 
    height:350px; 
} 

，並把它應用到你的HTML這樣的：

<div id="hamburgerh" class="w_300h_350"></div> 
<div id="tacoh" class="w_300h_350"></div> 

Answer 2

Wrapit容器內。

http://jsbin.com/qediqoxiwo/edit?css,output

.container { 
    width:100%; 
    margin: 200px 0 40px; 
} 

.col { 
    float:left; 
    width: 300px; 
    height: 350px; 
    background:blue; 
} 

.col:last-child { 
    float:right; 
    background: red; 
}