当屏幕太小而不适合它们时，2个并排的div保持居中

Question

我正在尝试创建一个并排2个div的页面，当屏幕变得太窄而不适合它们时，将第二个div放在第一个div下方，两者都在屏幕上居中。对此有一个简单的解决方案吗？

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

Answer 2

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