2 个并排的 div 在屏幕太小而无法同时保持居中时保持居中答案

【问题标题】：2 divs side by side that remain centered when screen is too small to fit them both2 个并排的 div 在屏幕太小而无法同时保持居中时保持居中
【发布时间】：2016-03-29 00:45:32
【问题描述】：

我正在尝试创建一个并排有 2 个 div 的页面，当屏幕变得太窄而无法容纳它们时，它们都会将第二个 div 放在第一个 div 的下方，都位于屏幕的中心。有没有简单的解决方案？

【问题讨论】：

考虑使用引导框架
@geeksal 认真的吗？您建议使用整个库来定位两个 div？ Bootstrap 不能替代学习使用 CSS。
Two Divs next to each other, that then stack with responsive change的可能重复

标签： css

【解决方案1】：

这是非常简单的标准 css。将 2 个 div 放在另一个 div 中。将它们居中并将宽度设置为您选择的px 大小。 div 将彼此相邻并居中，如果您将屏幕尺寸调整为不适合它们在一行上，则一个会位于另一行下方，仍居中。

在下面的示例中，单击“整页”并调整屏幕大小以查看它如何进入同一行/转到下一行，具体取决于它是否适合。

#one, #two {
  display: inline-block;
  width: 400px;
  height:300px;
  border: 2px solid red;
}

<div align="center">
<div id="one" align="center">things</div>
<div id="two" align="center">more things</div>
</div>

【讨论】：

【解决方案2】：

我发现这非常简单，只需很少的代码。将两个 div 放在一个容器中。将display:inline-block; 属性添加到容器内的两个 div 中，它们将堆叠在特定宽度上。 https://jsfiddle.net/Lg06c1sb/

【讨论】：