骨架 CSS 类 网格
Skeleton CSS classes grids
我正在使用 Skeleton.css
在 wordpress 中创建网格系统
本教程显示了 header 的以下标记,在这里您可以看到徽标有 3 classes,- 五列和 clearfix
<header>
<div class="five columns clearfix">
get_template_directory_uri(); ?>/img/logo.svg"></a>
</div>
</header>
但是当我查看 skellton css 时,我看不到 'five' 的 class 所以我将其更改为 .five.columns 但他没有区别,我我在 class 周围创建了一个边框。five.columns,它没有显示,我是不是遗漏了一些明显的东西?
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Larger than mobile */
@media (min-width: 400px) {}
非常感谢
这里有一个 fiddle,其中包含一些高度和颜色样式,以使其显而易见。你的 div 是 0px 高度吗?使用浏览器中的开发人员工具进行检查 - Chrome Developer Tools website.
https://jsfiddle.net/p1w61hmt/.
<header style="height: 100px; background: green;">
<div class="five columns clearfix" style="height: 100%;">
</div>
</header>
.five.columns { width: 39.3333333333%; }
.columns { background: red; }
可能是一些粘贴错误,但您的 HTML 无效,您的 css 看起来像一个不完整的片段。
我正在使用 Skeleton.css
在 wordpress 中创建网格系统本教程显示了 header 的以下标记,在这里您可以看到徽标有 3 classes,- 五列和 clearfix
<header>
<div class="five columns clearfix">
get_template_directory_uri(); ?>/img/logo.svg"></a>
</div>
</header>
但是当我查看 skellton css 时,我看不到 'five' 的 class 所以我将其更改为 .five.columns 但他没有区别,我我在 class 周围创建了一个边框。five.columns,它没有显示,我是不是遗漏了一些明显的东西?
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Larger than mobile */
@media (min-width: 400px) {}
非常感谢
这里有一个 fiddle,其中包含一些高度和颜色样式,以使其显而易见。你的 div 是 0px 高度吗?使用浏览器中的开发人员工具进行检查 - Chrome Developer Tools website.
https://jsfiddle.net/p1w61hmt/.
<header style="height: 100px; background: green;">
<div class="five columns clearfix" style="height: 100%;">
</div>
</header>
.five.columns { width: 39.3333333333%; }
.columns { background: red; }
可能是一些粘贴错误,但您的 HTML 无效,您的 css 看起来像一个不完整的片段。