Question

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

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

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

Answer 1

发生这种情况的原因是因为div元素正在浮动。当您降低屏幕尺寸时，挡块会变得更长（更高）并且浮子会断裂。您可以通过添加此代码段清除所有其他行：

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

但是，请注意，您需要使用polyfill才能在旧浏览器上运行，因为不支持某些伪类，如nth-child。我推荐Selectivizr。

Answer 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等希望这有帮助

Answer 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>

调整响应div

3 个答案: