gpt4 book ai didi

css - 骨架 CSS 类网格

转载 作者:行者123 更新时间:2023-11-28 08:17:22 28 4
gpt4 key购买 nike

我正在使用 Skeleton.css 在 wordpress 中创建一个网格系统

教程显示了标题的以下标记,在这里您可以看到 Logo 有 3 个类,- 五列和 clearfix

   <header>
<div class="five columns clearfix">
get_template_directory_uri(); ?>/img/logo.svg"></a>
</div>
</header>

但是当我查看 skellton css 时,我看不到“五”类,所以我将其更改为 .five.columns 但他没有区别,我在类 .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 看起来像一个不完整的片段。

关于css - 骨架 CSS 类网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28926913/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com