如何并排获得这两个div?

时间:2011-03-22 05:54:26

标签: css layout html

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

8 个答案:

答案 0 :(得分:104)

由于div默认为block元素 - 意味着它们将占用完整的可用宽度,请尝试使用 -

display:inline-block;

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

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

有关详情,请参阅本教程 - http://learnlayout.com/inline-block.html。我甚至会推荐那些导致那篇文章的文章。 (不,我没写过)

答案 1 :(得分:65)

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

上的工作示例

答案 2 :(得分:36)

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

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

答案 3 :(得分:4)

最适合我的方式:

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

 .right{
   margin-left:140px;
 }


http://jsfiddle.net/jiantongc/7uVNN/

答案 4 :(得分:4)

使用flexbox非常简单!

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

Fiddle example

答案 5 :(得分:3)

使用样式

.child_div_1 {
    float:left
}

答案 6 :(得分:1)

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

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

答案 7 :(得分:1)

使用flexbox

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