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设置一个浮动：

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

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

或将它们包装成容器，如Marius Balaj所说：

.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;
}

如何在html中创建两个垂直列

2 个答案: