我需要两列 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。当它在移动设备上折叠成一列时,它们应该是全宽的。
最佳答案
如果您的目标是在 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
关于css - 两个响应式 div 没有对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21930049/