如何让这两个潜水器并排放置？

我有两个没有嵌套的 div，一个在另一个下面。它们都在一个父 div 中，并且这个父 div 重复自己。所以本质上来说:

<div id='parent_div_1'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>


<div id='parent_div_2'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>


<div id='parent_div_3'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>

我想让每一对 child_div_1和 child_div_2紧挨在一起。我该怎么做呢？

384270 次浏览
小开
最佳答案 
#parent_div_1, #parent_div_2, #parent_div_3 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-right: 10px;
float: left;
}
.child_div_1 {
float: left;
margin-right: 5px;
}

检查 http://jsfiddle.net/c6242/1/的工作实例

小开

用这种风格

.child_div_1 {
float:left
}
小开

子 div 类中的用户 float:left属性

详细检查 div 结构: http://www.dzone.com/links/r/div_table.html

小开

因为 div 的默认值是 block元素-这意味着它们将占据整个可用宽度，所以尝试使用-

display:inline-block;

div现在呈现为内联的，即不会中断元素流，但仍将被视为块元素。

我发现这项技术比与 float摔跤容易。

有关更多信息，请参见本教程 -http://learnlayout.com/inline-block.html。我甚至会推荐那篇文章的前面的文章。(不，不是我写的)

小开

我发现下面的代码非常有用，它可以帮助任何人谁来这里搜索

<html>
<body>
<div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
<div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
<div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>

小开

对我最有效的方法是:

 .left{
width:140px;
float:left;
height:100%;
}


.right{
margin-left:140px;
}


Http://jsfiddle.net/jiantongc/7uvnn/

小开

使用弹簧盒

   #parent_div_1{
display:flex;
flex-wrap: wrap;
}
小开

使用柔性箱它是超级简单！

#parent_div_1, #parent_div_2, #parent_div_3 {
display: flex;
}

小提琴的例子


提交答案