两个响应式 div 没有对齐答案

【问题标题】：two responsive divs not lining up两个响应式 div 没有对齐
【发布时间】：2014-02-21 18:49:29
【问题描述】：

我需要两列 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。在移动设备上折叠成一列时，它们应该是全宽的。

【问题讨论】：

一个jsfiddle会更好..
#container > .block { -moz-box-sizing: border-box; box-sizing: border-box; }

标签： css html

【解决方案1】：

如果您的目标在 width: 42% 上实现，那么所有 div 可能都有一些边距和/或填充。
一个元素的总水平尺寸是由它的 width + padding + margin 来衡量的。因此，当您在结果中设置 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>

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

要将布局更改为特定分辨率的一列，您需要引入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
三星 Galaxy S3 肖像 - 360px
三星 Galaxy S3 横向 - 640px
平板电脑肖像（大部分） - 760px
平板电脑横向（大部分）- 960px

【讨论】：

这有很大帮助！不知道元素宽度测量。可以内联添加媒体查询吗？所有这些都会导出到其他站点，并且必须是内联的。最好使用的默认媒体查询是什么？
您不能在style 属性中添加它，但如果您能够修改 HTML 标记，您可以像我的示例中那样进行操作（我编辑了它）。只需将 <style>...</style> 部分添加到 HTML。
还有其他选择吗？尽管可以访问 HTML 标记，但我似乎无法让媒体查询正常工作。
你可能做错了什么。它应该工作。显示您添加的确切 HTML
这里所有 HTML 的完整副本：pastebin.com/jKtZ3z1s 它来自 Magento 的 HTML 描述编辑器。

【解决方案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>

【讨论】：

【解决方案3】：

fiddle
div 是挨着坐的吗？
也许它们继承了其他一些 CSS，并从父元素中获得了边距或填充。
试试margin: 0; padding: 0;

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

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

希望这会有所帮助。

【讨论】：