html - 我怎么可能水平对齐 DIV？

Question

我一直在到处搜索并自己尝试了很多关于如何水平对齐 DIV 的事情。我可能以错误的方式思考这个问题，但我很想在一个适合用户浏览器大小的网络浏览器中重新创建它，当缩小到一定大小时，比如 iPhone 或其他智能手机，它将更改为另一种布局。

这是我的意思的一个例子。

谢谢你的帮助！

Answer 1

要将 div 彼此相邻放置，您需要使用 float: left;

<div id=container>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
  <div class="section"></div>
</div>

然后在css中：

#container {
  width: 1000px;
}
.section {
  position: relative;
  float: left;
  width: 248px;
  border: 1px solid black;
}

这是一个例子

如果您希望事情具有响应性，则有几个不同的选项，具体取决于您想要做什么。最有效的方法可能是查看@media 标签。关联

更新：

这是另一个示例，其中 div 将自动缩放到浏览器宽度。

例子