三个彼此相邻的居中框 html答案

【问题标题】：Three centered boxes next to each other html三个彼此相邻的居中框 html
【发布时间】：2015-10-16 01:53:10
【问题描述】：

在我的网站上，我有一行框，它们是位于页面中心的 div。我想将其中 4 个并排放置在一条水平线上，当页面调整大小时，它会下降到 3 个并排，然后是两个，然后是一个。

我将调整盒子的大小，以便它们适合。

该网站是here
可以使用页面源码查找代码，css可以找到here

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

（或者您可以在这里更轻松地调整屏幕宽度：http://jsfiddle.net/swm53ran/359/）

.block {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightgray;
}
.container  {
  text-align: center;
}

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

【讨论】：

【解决方案2】：

在容器上使用text-align: center;，在盒子上使用display: inline-block;，还可以在容器上设置最小宽度。

【讨论】：