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％+填充+边距，因此无法在一行中放入两个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>

对于你所有divs你应该没问题。

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

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

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

iPhone（最多5秒）肖像 - 320px
iPhone（最多4s）格局 - 470px
iPhone 5 / 5s风景 - 560px
三星Galaxy S3肖像 - 360px
三星Galaxy S3风景 - 640px
平板电脑肖像（大部分） - 760px
平板电脑风景（大部分） - 960px

Answer 2

Fiddle

.block{
    float: left; width:49%; //Change this to 50%
    border: 1px solid green;  //Change to 0px
}

.left{
    text-align: left;
}

.right{
    text-align: right;
}

HTML：

<div id="container" style="width: 100%; margin: 0 auto;">
    <div class="block right">left div</div>
    <div class="block left">right div</div>
    <div class="block right">left div</div>
    <div class="block left">right div</div>
    <div class="block right">left div</div>
    <div class="block left">right div</div>
</div>

Answer 3

fiddle
div是彼此相邻的？
也许他们继承了一些其他的CSS，并从父元素中获得边距或填充试试margin: 0; padding: 0;

要在较小的屏幕上100％使用它们，您必须使用media queries
例如：

@media screen and (max-width: 600px) {
      .block {
          width: 100%;
      }
}

希望这有点帮助。

两个响应的div没有排队

3 个答案: