使用纯 css 框架时的框偏移

Question

我正在为我的网站使用 pure 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;
}

How the website looks

Answer 1

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

http://codeply.com/go/rVcX2Bhpko

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

使用纯 css 框架时的框偏移

Box offset when using the pure css framework

html

css

yui-pure-css