如何让这两个 div 并排？答案

【问题标题】：How to get these two divs side-by-side?如何让这两个 div 并排？
【发布时间】：2011-07-20 05:35:07
【问题描述】：

我有两个未嵌套的 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

【解决方案1】：

使用 flexbox 超级简单！

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

Fiddle example

【讨论】：

【解决方案2】：

使用弹性盒

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

【讨论】：

【解决方案3】：

#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 彼此对齐，而不是父母（至少这是我的理解......）
我仍然认为display: table-cell 会得到更接近他的意思的结果（从那时起它们将具有相同的高度等等），但这种方式肯定会奏效。
@ehdv display: table-cell 在 IE6 IE7 中不受支持。向左飘浮;是这样做的正确方法。
实际上在 IE6,7 中执行此操作的正确方法是使用 <tr><td>，因为当用户调整窗口大小时，任何其他选项都会中断。在现代浏览器中，display: inline-block 通常是最佳选择。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

由于默认情况下 div 是 block 元素 - 这意味着它们将占据整个可用宽度，请尝试使用 -

display:inline-block;

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

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

有关更多信息，请参阅本教程 - http://learnlayout.com/inline-block.html。我什至会推荐之前的文章。（不，不是我写的）

【讨论】：

我真的很喜欢这个解决方案。我唯一的问题是对齐两个 div 的底部而不是对齐顶部。这也有快速设置吗？
我建议使用 2 个具有相同高度的包装器 divs，这样它们里面的内容就会看起来是顶部对齐的。
我同意。这比float:left 好得多，因为它为您提供了更多选择，而无需重新定义整个布局。事情以这种方式“正常工作”。在这里查看：jsfiddle.net/SrAQd/4
为了获得垂直对齐，我会添加“vertical-align: top;”
@Chris：是的，我同意 cdiggins。这应该对你有帮助。

【解决方案6】：

最适合我的：

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

 .right{
   margin-left:140px;
 }

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

使用样式

.child_div_1 {
    float:left
}

【讨论】：