这是我的 jsfiddle 代码
如果您向上更改水平大小，则 div(第 1 节和第 2 节)水平居中。但是如果宽度很低，第 2 部分会在第 1 部分下面。问题是如何将它们居中？我尝试了很多 wrapper 的可能性，但没有结果。你能帮帮我吗？
最佳答案
嗯，我想我明白你的意思了。好吧，因为 #section_first 的宽度是固定的和 #section_second ，我认为这仍然可以通过(大部分)媒体查询来完成。不过，在给出修复之前，需要更改几件事:
首先，删除display:inline-block根据您对 #main 的定义，否则将 #main 的子项居中会有问题之后。此外，删除 display:inline来自 #section_first和 #section_second ，因为该样式已完全被您应用于它们的 float 覆盖，并且它们只会在以后引起问题。
现在，稍微重新排列您的 HTML，以便 #clearer允许 #main缩放到其内容的大小(基本上，将 #clearer 移动到 #main 中):
<div id="page_content">
<div id="main">
<div id="section_first">Section 1</div>
<div id="section_second">Section 2</div>
</div>
<div id="clearer"></div>
</div>
此时，布局中实际上应该没有任何改变 - 所以现在让我们添加一些媒体查询响应:
@media (max-width:478px) {
div#section_first {
margin:0 auto;
float:none;
}
div#section_second {
margin:0 auto;
float:none;
}
}
478px 的最大宽度是从#main 开始计算的宽度为 90%，其内容的组合宽度为 200px + 200px + 30px(边距)= 430px。并且 430px/0.9 = 477.777px，我们可以四舍五入到 478px，以便在出现不需要的显示问题之前使用替代样式。媒体查询中的样式停止了子项的 float ，并以常见的 margin:0 auto 居中。 .
这是一个 updated JSFiddle演示修改后的代码。请注意，我还删除了 <html> 上的默认边距。和 <body>使用 CSS。如果您有任何问题，请告诉我!
关于html - 当页面宽度较低时，将两列(div)彼此对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22692436/