Question

我一直在尝试在我正在开发的Wordpress主题上实现960网格系统。我有一个带有项目缩略图的索引页面，每个缩略图设置为占用12列中的4列，使其成为3列缩略图。

但由于一些无法解释的原因，第三列不会出现 - 它被推入总共两列。

我在文本编辑器中创建了一个基本的测试页面，其中没有任何问题，但只要我将其应用到Wordpress，它就会显示两列。

这是出现问题的wordpress页面： http://dev.niklaslundberg.com

以下是我在文本编辑器中创建的测试，它在wordpress中以我喜欢的方式运行：

<html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
    <link rel="stylesheet" type="text/css" media="all" href="css/960.css" />


    <style type="text/css">

    .image {

    }

    .image img {
        max-width: 100%;
        height: auto;
    }

    #content {

    }

    </style>

    </head>

    <body>

    <div id="content" class="container_12">


    <div class="grid_4 image">
        <img src="1.jpg">
    </div>

    <div class="grid_4 image">
        <img src="2.jpg">
    </div>

    <div class="grid_4  image">
        <img src="3.jpg">
    </div>

    <div class="grid_4 image">
        <img src="4.jpg">
    </div>

    <div class="grid_4 image">
        <img src="5.jpg">
    </div>

    <div class="grid_4 image">
        <img src="6.jpg">
    </div>

    <div class="grid_4 image">
        <img src="7.jpg">
    </div>


    </div>



    </body>
    </html>

Answer 1

这是因为你的4列div上的水平边距。 12列容器的宽度= 940px，每个4列div的宽度为300px，剩余10px和10px。右边距。所以，3x320px = 960px，大于940px的容器宽度。如果你做容器960px并摆脱容器10px左和＆amp;右边距，它有效。你必须记住，水平边距不会崩溃，所以如果你有2个div并排，10px左/右边距，你可以在2之间获得20px的边距。

Wordpress和960网格系统问题

1 个答案: