Question

我正在为Wordpress编辑一个surfarama主题。我遇到了一个棘手的问题。我希望全屏显示（默认情况下是960px），帖子应该安装在两个或三个固定和对齐的行中，而不是漂浮怪异。

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

＃容器（或主包装），
。网格包装（包装网格视图），
。网格-box （格式化feautered type post）和
。最新（格式化最新类型的帖子，比常规精选帖子更大）

我做什么

我编辑 #container ID（将宽度更改为100％）。

#container { 
    width: 100%;
    margin: 0 auto;
    padding: 0 0%;
    -webkit-box-sizing : border-box; 
    -moz-box-sizing : border-box; 
    -o-box-sizing : border-box; 
    box-sizing : border-box; 
}

我从.grid-wrap

中删除任何宽度限制

然后我在сlass中编辑宽度，负责网格视图.grid-box

.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;
}

所以考虑到空间 - 1440px - 最新帖子（1440px）下的三个特色帖子（300px + 300px + 300px +空格）很合适，但我得到的是

http://i.imgur.com/VTiw8jP.png

这个主题还包括320及以上的自适应分辨率脚本 - 但我尝试过以各种方式编辑它，帖子不适合一行，它们会跳到各处。

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

非常感谢你。

这是原始的CSS样式表 http://surfarama.com/wp-content/themes/surfarama/style.css?ver=3.7.1

CSS三列网格

0 个答案: