创建四列网格模板

更新了

网格。我知道你爱他们!它们是我们通常添加到我们大部分大部分的最令人请求的设计特征之一WordPress照片主题。在下面的教程中,我向您展示了如何使用CSS“伪类”来实现完整的四列网格。通过一些小调整,您可以调整模板以支持您喜欢的任意数量的列。在构建投资组合模板的存档页面时,这方面可以派上派上派派。这是最终结果的样子:

让我们说你的HTML看起来像这样:

         

以下是您可以添加到样式表的四个列网格的CSS:

.column {float:左;边缘:0 2.5%1EM 0;宽度:22.5%;} .column:nth-​​child(4n){margin-over:0;} .column:nth-​​child(4n + 1){clear:left;}

伪类允许我们定位特定的CSS选择器。In our example above, we’re using pseudo classes to check for the fourth column (.column:nth-child(4n)) to remove the right margin on that specific column and for the first, fifth, ninth columns (.column:nth-child(4n+1) to clear the float left property for proper column stacking. This ensures our grid properly fills the containing div. For more info on pseudo classes, see这个CSS欺骗文章

免责声明:CSS伪课程仅在现代浏览器中工作。他们在9之前没有在IE版本中工作。

你想要5列吗?没问题!将4N变为5N。然后,将.columns边距更改为边际:0 2%1em 0;宽度宽度:18%;

进一步接受此概念并将其应用于WordPress主题,我附上了一个名为“网格”的页面模板,您可以添加到活动主题文件夹以创建上面的布局。模板评论得很好,请检查它们以调整模板到您的喜好。享受!

下载网格页面模板

通讯
加入280,000独立网站所有者

加入我们每月通讯的下一个人获得25%的优惠券!

我们保证100%隐私。您的信息将不会被共享。

此条目已发布。书签书签永久链接

张贴了,在图纸按下

Thad是主题的创始人。工程和图纸纸张按。此前,他在今天制作了美国美国的在线多媒体和纪录片项目,包括总统巴拉克奥巴马和许多其他人的落成典礼。他住在布鲁克林,纽约州的妻子艾比。

12关于“创建四个列网格模板”的想法

  1. 我无法将Twitter集成到我的Mixfolio主题的选项面板中。没有任何事情发生,它不会保存我添加的Twitter帐户。如何解决这个问题?

  2. 如何仅为特定类别添加此类。示例:仅限视频或照片库类别?如何在所有帖子中获得相同的图像大小或如何使用timbthumb ??

  3. 嗨,我下载了页面模板,到目前为止它看起来像我在寻找的东西。但是,它正在拉博帖,我希望它能够提取某些页面,以便我可以制作“社区”页面。我也喜欢使用丢弃帽的预览的想法。有没有办法让这种情况发生?我真的很新,所以为我添加页面模板是巨大的!是否有一些CSS或其他东西要为此添加?这也是响应吗?

  4. 嗨,我下载了页面模板,到目前为止它看起来像我在寻找的东西。但是,它正在拉博帖,我希望它能够提取某些页面,以便我可以制作“社区”页面。我也喜欢使用丢弃帽的预览的想法。有没有办法让这种情况发生?我真的很新,所以为我添加页面模板是巨大的!是否有一些CSS或其他东西要为此添加?这也是响应吗?

  5. 嗨,这是一个很棒的教程!我真的很喜欢这个模板的简单性。我有点麻烦通过类别过滤我的内容。有什么建议么?

  6. 伟大的教程 - 非常感谢!我想将它翻译成德语并在我的博客上使用它。当然,我会将您的网站链接到您的网站。对你来说还可以吗?

    从德国Berln讨论

  7. 我在教堂博客上发布了事件通知。我们经常在同一天或在彼此的日子内发生至少四种不同的事件,但无论发生什么事件都发布了最近将所有其他事件推出博客。我想修改主题布局,以便所有即将到来的事件都可以在彼此相邻的顶部保持在视线中。我认为不是一个网格,但四个不同的专栏标题 - 周日服务,艺术,慈善机构和会议 - 并排展示。每个列都将显示自己的专用博客,或在一个博客中,将有一些机制来选择要放置每个事件帖的列。在我看来,这对于任何需要同时公布的多个事件的组都非常有用。任何帮助感激。PS我是一个HTML / CSS退伍军人,但是一个完整的新手到WordPress。

发表评论