Html 三列网格

我正在为Wordpress编辑一个主题。我面临着一个棘手的问题。 我想让它全屏显示（默认为960px），并且帖子应该被安装到两到三个固定对齐的行中，而不是奇怪地浮动

稍微解释一下-有以下结构

#容器（或主包装），
网格包装（包装网格视图），
网格框（格式化feauted类型的帖子）和
最新的（格式化最新类型的帖子，比常规特色帖子大）

我做什么

我编辑容器id（将宽度更改为100%）

我将从.grid wrap中删除任何宽度约束

然后我编辑类中的宽度，负责网格视图。网格框

.grid-box {
    position: relative;
    display: inline-block;
    float: left;
    width: 300px;
    background-color: #359bed;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 11px 0; 
    color: #fff;
    overflow: hidden;
}

我更改.latest类的宽度以适应当前的分辨率

.grid-box.featured:first-child,
.grid-box.latest {
    width: 1440px;
}

因此，考虑到space-1440px，在最新的post（1440px）下的三个特色post（300px+300px+300px+spaces）将非常适合，但我得到的是

这个主题还包括320和更高分辨率的自适应脚本-但我尝试过用各种方式编辑它，帖子不能放在一行中，它们会到处跳跃

原因可能是什么？浮动、显示类型或网格细节

非常感谢你

这是原始的CSS样式表

---

这就是我想要的样子。你能在JSFIDLE上上传你的作品吗？@rand0m谢谢！嗨，首先我假设你粘贴在小提琴上的CSS是surfarama的修改版，对吗？我想知道，当你可以单独编写样式表并覆盖CSS时，为什么要对核心CSS进行更改？其次，我建议您将网格分为两个单独的分区。第一个块在第一个div中，其余块在另一个div中，这样可以很容易地放大div并突出显示内容。对于第二个div，将其宽度设为100%，将其直接内容宽度设为33.33%（对于3列），将其向左浮动并添加一些填充。这应该会给你想要的结果。@random这听起来是个不错的主意，尽管我不知道如何在code-

.grid-box.featured:first-child,
.grid-box.latest {
    width: 1440px;
}