css - 两个响应式 div 没有对齐

Question

我需要两列 div，当屏幕尺寸变小时，它们可以响应并在彼此下方折叠。它们应该始终居中。但无论我做什么，我都无法让这些 div 并排放置。它必须全部是内联 CSS。

<div id="container" style="width: 100%; margin: 0 auto;">

<div class="block" style="float: left; width:50%;">left div</div>
<div class="block" style="float: left; width:50%;">right div</div>

<div class="block" style="float: left; width:50%;">left div</div>
<div class="block" style="float: left; width:50%;">right div</div>

<div class="block" style="float: left; width:50%;">left div</div>
<div class="block" style="float: left; width:50%;">right div</div>

</div>

我曾尝试将左右 div 的宽度更改为 42%，这意味着它们并排放置，但在桌面或手机上查看时会挤压这些 div。当它在移动设备上折叠成一列时，它们应该是全宽的。

Answer 1

如果您的目标是在 width: 42% 上实现的，那么所有的 div 可能都有一些边距和/或填充。
元素的总水平尺寸由其宽度 + 填充 + 边距 来衡量。因此，当您在结果中设置 width: 50% 时，您会得到 50% + padding + margin，因此无法在一行中放置两个 div。如果你设置

<div class="block" style="float: left; width:50%; margin: 0; padding: 0;">left div</div>
<div class="block" style="float: left; width:50%; margin: 0; padding: 0;">right div</div>

对于你所有的 div 你应该没问题。

要在特定分辨率下将布局更改为一列，您需要引入 media-query。例如:

<style>
@media only screen and (max-width: 360px) {
    div.block {
        width: 100%;
    }
}
</style>

当然，max-width 值取决于您的目标设备。以下是一些流行移动设备的一些示例分辨率:

• iPhone(最长 5 秒)纵向 - 320 像素
• iPhone(最长 4 秒)横屏 - 470 像素
• iPhone 5/5s 横向 - 560px
• Samsung Galaxy S3 肖像 - 360px
• Samsung Galaxy S3 横向 - 640px
• 平板电脑肖像(大部分)- 760px
• 平板电脑横屏(大部分)- 960px