我一直在尝试在我目前正在开发的 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>
最佳答案
这是因为 4 列 div 的水平边距。 12 列容器的宽度 = 940px，每个 4 列 div 的宽度为 300px，左右边距为 10px。因此，3x320px = 960px，大于 940px 的容器宽度。如果您制作容器 960px 并去掉容器 10px 的左右边距，它就可以工作。您必须记住水平边距不会折叠，因此如果您有 2 个并排的 div，左/右边距为 10px，则 2 个之间的边距为 20px。
关于css - Wordpress 和 960 网格系统的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20733689/