如何使这两个div并排？

110

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

css layout html

— 贾斯汀·梅尔策（Justin Meltzer）
source

82

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

— 侯赛因
source

1

他希望孩子的div彼此靠近，而不是父母（至少这是我的理解...）

— ehdv 2011年

4

我仍然认为display: table-cell将获得的结果更接近他的意思（因为那样它们将具有相同的高度等），但是这种方式肯定会起作用。

— ehdv 2011年

display: table-cellIE6 IE7不支持@ehdv 。向左飘浮; 是执行此操作的正确方法。

— 侯赛因

实际上，在IE6,7中执行此操作的正确方法是使用<tr><td>，因为当用户调整窗口大小时，任何其他选项都会中断。在现代浏览器中，display: inline-block通常是最佳选择。

— 约翰·亨克尔

126

由于div默认为block元素-表示它们将占据全部可用宽度，请尝试使用-

display:inline-block;

在div现在被呈现内嵌即不破坏流元件的，但仍然被视为块元件。

我发现此技术比与floats 搏斗更容易。

有关更多信息，请参见本教程-http://learnlayout.com/inline-block.html。我甚至会推荐导致该文章的先前文章。（不，我没有写）

— 罗宾·马本
source

我真的很喜欢这个解决方案。我唯一的问题是对齐两个div的底部而不是对齐顶部。也有一个快速设置吗？

— 克里斯（Chris

我建议使用2个div高度相等的wrapper ，这样它们内部的内容似乎看起来是最靠前的。

— 罗宾·马本

2

我同意。这要好得多，float:left因为它无需重新定义整个布局即可为您提供更多选择。事情以这种方式“起作用”。在此处查看：jsfiddle.net/SrAQd/4

— Jerry

12

为了获得垂直对齐，我将添加“ vertical-align：top;”

— cdiggins

@克里斯：是的，我同意名人。那应该对你有帮助。

— 罗宾·马本

44

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

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

展开摘要

— 斧头
source

11

使用flexbox超级简单！

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

小提琴的例子

— 索尔
source

6

使用风格

.child_div_1 {
    float:left
}

— 阿米特克
source

5

最适合我的：

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

 .right{
   margin-left:140px;
 }

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

— 建同
source

2

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

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

— 普兰尼·拉娜（Pranay Rana）
source

2

使用flexbox

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

— dasfdsa
source