Html 如何获得这两个div'；s在这个容器里并排放着

我有以下内容，包括html标记和CSS：

.embers信息{
边缘顶部：30px；
边框：1px纯黑；
宽度：600px；
填充：20px 0px 30px 0px；
}
.余烬总数{
宽度：80px；
}
.embers电子邮件{
左边距：20px；
}
.余烬电话{
利润率：10px 0px 0px 20px；
}
余烬笔记{
保证金：20px 0px 0px 20px；
}
.余烬皮卡{
左边距：20px；
}
.embers操作{
左边距：20px；
边缘顶部：20px；
}
.af商业{
浮动：对；
}
.embers签出标题{
填充：3px 10px 12px 5px；
}
.embers用户信息{
宽度：300px；
边框：4px纯蓝色；
填充底部：50px；
}
.embers配送信息{
宽度：300px；
边框：4倍纯红；
填充底部：50px；
}

电子邮件：

电话号码：

注：


取货时间：

11月21日上午10点：

11月21日中午：

11月21日下午2点：

11月21日下午4点：

11月22日上午8点：

保存订单
购买
我来了

您可以通过将

显示：flex

添加到包含的div中来使用flexbox。这将默认为行的

flex direction

，这将使它们彼此相邻：

更多关于在flexbox容器中布置孩子的阅读：

---

有人提到了flexbox，尽管这是一个完全有效的解决方案，但可能不是您所需要的，这取决于您的最低浏览器要求，因为flexbox仍然没有得到人们所希望的那么好的支持。使用传统方法并排对齐图元时，有两个选项，

display:inline block

和

float

显示：内联块

：

注:

内联块

元素在某些浏览器上可能会以间距呈现，最明显的是chrome。要修复此设置，我们可以在父容器上设置

font-size:0

，然后在子容器上重置

font-size

浮动：左/右

：

---

注意：浮动图元从流中取出，不会影响其父图元的高度，从而导致大小和布局问题。为了缓解这种情况，我们需要在父容器上应用clearfix，最简单的方法是在父容器上设置

overflow:auto

尝试将

display:flex

添加到

.embers info

将您的代码放入您的问题中。哦，很好。

display:flex

已经有一段时间了吗？它得到了很好的支持。我是否需要为较旧/移动浏览器填充它？您支持哪些浏览器？你可以在这里寻找支持：是的，调查一下。典型的答案是：现代浏览器，希望有人不会有旧版本的Safari。也要小心IE10。它基于一个旧版本的规范，所以它使用了一些旧的，过时的语法。酷，thx的提示。我投了更高的票，但可能会选择其他答案，因为我需要支持一些旧的拐杖<代码>显示：flex看起来就像我10年前希望拥有的一样。

  .embers-info {
    display: inline-block;
  }

  .embers-info > div {
      display: inline-block;
      vertical-align: top;
  }

  .embers-info {
    overflow: auto;
  }

  .embers-info > div {
      float: left;
  }