html - 使用纯 css 框架时的框偏移

Question

我正在为我的网站使用纯 CSS。问题是，这些盒子有一个奇怪的偏移量，这是无处定义的 即使我将填充和边距设置为零，盒子也不会移动。这会导致最后一个框在第二行中移动。

HTML：

<div class="pure-u-4-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-5-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-11-24 outer">
<div class="inner-ib inner"></div>
</div>

<div class="pure-u-4-24 outer ">
<div class="inner-ib inner"></div>
</div>

CSS：

.inner {
  background-color: rgba(44, 62, 80, 0.75);
}
 .outer {
   padding-top: 10vh;
}
.inner-ib{
  height: 90vh;
}

网站的外观

Answer 1

将所有内容放入pure-g容器中，以使您的列正常工作..

http://codeply.com/go/rVcX2Bhpko

<div class="pure-g"> 
      ..
</div>