Issue with Wordpress and 960 Grid System

StackOverflow https://stackoverflow.com/questions/20733689

题

I've been trying to implement the 960 grid system on a Wordpress theme that I'm currently developing. I've got a index page with project thumbnails which are set to take up 4 out of 12 columns each, making it 3 columns of thumbnails.

But for some unexplainable reason, the third column won't appear – it's being pushed down into a total of two columns.

I've made a basic test page in a text editor in which there's no issue, but as soon as I apply it to Wordpress it will only display two columns.

This is the wordpress page at which the problem occurs: http://dev.niklaslundberg.com

And below is the test that I've created in a text editor, which acts the way I'd like it to in 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>
有帮助吗？

解决方案

It's because of the horizontal margin on your 4 column divs. The 12 column container has width = 940px, and each 4 column div has width 300px, with 10px left & right margin. So, 3x320px = 960px, which is greater than 940px container width. If you make container 960px and get rid of the container 10px left & right margin, it works. You have to remember that horizontal margins don't collapse, so if you have 2 divs side-by-side with 10px left/right margin, you get 20px margin between the 2.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top