如何获得这两个div并排?

我有两个不嵌套的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_1child_div_2彼此相邻。 我怎样才能做到这一点?

 #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/查看工作示例;

由于div的默认是block元素 – 意味着他们将占用全部可用的宽度,尝试使用 –

 display:inline-block; 

div现在是内联的,即不会中断元素的stream动,但仍然会被视为块元素。

我发现这个技术比摔跤更容易。

有关更多信息,请参阅本教程http://learnlayout.com/inline-block.html 。 我会build议甚至以前的文章,导致了那一个。 (不,我没有写)

我发现下面的代码非常有用,它可以帮助任何人在这里search

 <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/

使用风格

 .child_div_1 { float:left } 

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

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