如何让这两个div并列在一起？
如何让这两个div并列在一起？
提问于 2011-03-22 13:54:26
我有两个不嵌套的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放在一起。我该怎么做呢？
回答 8
Stack Overflow用户
回答已采纳
发布于 2011-03-22 13:58:06
#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/查看工作示例
Stack Overflow用户
发布于 2011-03-22 14:33:19
由于默认情况下div是block元素-这意味着它们将占用全部可用宽度，请尝试使用-
display:inline-block;div现在以内联方式呈现，即不会中断元素流，但仍将被视为块元素。
我发现这种技术比使用float更容易。
有关更多信息，请参阅本教程- http://learnlayout.com/inline-block.html。我甚至会推荐之前的文章，这些文章导致了这个问题。(不，不是我写的)
Stack Overflow用户
发布于 2012-07-11 21:49:30
我发现下面的代码非常有用，它可以帮助任何来这里搜索的人
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5387392
复制相关文章
相似问题