对齐响应式 div答案

【问题标题】：Aligning responsive divs对齐响应式 div
【发布时间】：2014-05-13 05:41:30
【问题描述】：

我正在为一个网站编写响应式设计，我有 4 个单独的 div，它们应该排列为 2 TOP x 2 BOTTOM。在某些分辨率下，它似乎工作正常，但在其他分辨率下，左上 div 和左下 div 之间有一个洞。它应该是这样的： http://postimg.org/image/76q5y5w5v/

这是不正确渲染时的样子： http://postimg.org/image/6a4f8x4j7/

如果您想查看所有应用的 CSS，只需访问 http://bbogdanov.us/（页面底部）并尝试使用浏览器的大小来监控 div 在不同大小下的行为。

【问题讨论】：

标签： html css responsive-design web

【解决方案1】：

发生这种情况的原因是div 元素正在浮动。当您降低屏幕尺寸时，块变得更长（更高）并且浮动被打破。您可以通过添加此 sn-p 清除每隔一行：

.uslugihome2:nth-child(odd) {
    clear: left;
}

但请注意，您需要使用 polyfill 才能在较旧的浏览器上工作，因为不支持像 nth-child 这样的伪类。我推荐Selectivizr。

【讨论】：

【解决方案2】：

目前每个框都有以下标记：

<div class="uslugihome2">
   <div class="usluginame">
   <div class="uslugiimage">
   <div class="uslugidesc">
</div>

您看到差距的原因是uslugihome2 上设置的宽度和边距。

所以我想做的是，创建另一个 div 来包装子 div，如下所示：

<div class="uslugihome2">
   <div class="uslugi_wrapper">
      <div class="usluginame">
      <div class="uslugiimage">
      <div class="uslugidesc">
   </div>
</div>

然后到style.css的第316行，去掉margin: 2.5%;，然后把宽度改成50%。

完成后，将以下内容添加到您的 css 文件中：

.uslugi_wrapper {
    padding: 0 15px;
}

不确定您要支持哪种浏览器，但这也将确保支持 IE8 之类的浏览器希望这会有所帮助

【讨论】：

【解决方案3】：

这是因为这些 div 的高度会随着窗口宽度的变化而变化。尝试在每两个单独的 div 周围包装一个 div。让我们称之为一行。

<div style="display: block;">
    <div class="uslugihome2">...</div>
    <div class="uslugihome2">...</div>
</div>
<div style="display: block;">
    <div class="uslugihome2">...</div>
    <div class="uslugihome2">...</div>
</div>

【讨论】：