Question

是否可以有3列，宽度相等，中间有2列，都是流体？我能找到的所有东西都显示了一个固定的列，或者它们的宽度不同。我需要它们都是一样的。无论我在这个页面上做什么，最后一个li都没有到达容器的边缘。如果我放大了li的％，则它不适合较小的分辨率。谢谢！

Answer 1

看起来您已经得到了如何使其正常工作的答案，但如果您要在这些列上设置任何边距或边框，您将很快遇到另一个问题。

那些宽度百分比？它们不包括边界/边距 - 所以如果你添加其中任何一个，你将再次有列溢出。

解决方案？确保设置box-sizing: border-box; - 如果您之前没有听说过，Google就可以了。这太神奇了！

Answer 2

你的问题让我感到困惑。一方面，这个例子显示了你所要求的声音：

另一方面，您网站的实际示例显示了固定宽度的情况，其中您的列不需要流畅。如果上面的例子没有给出你需要的东西，你能提供更多的上下文吗？

Answer 3

我想说的是计算正确的百分比。

要重新开始，请删除所有三列上的边框和边距。然后使它们的宽度为33.3333％，这样它们就能完全贴合在容器内。

查看CSS我可以看到中间列的边距（左和右）为3.75％，因此您必须将列宽重新计算为100 - （3.75 * 2）/ 3 = 30.833333％。

其次，将border切换为outline，以防止不必要的宽度添加到您的布局中。

最后让你的img宽度为100％，以便它们很好地放入容器内。

之后应该完成，我使用Firebug在您的网站上执行所有这些更改，看起来它已经成功了。

Answer 4

如果你想把最后一个李添加：

#categories-wrapper ul li.students{
    float: right;
}

#categories-wrapper ul li.fine-art{
        float:left;
}

将categories-wrapper ul li：nth-child（2）替换为：

#categories-wrapper ul li.gd {
margin-left: 4.25%; /* 36px / 960px */
    float: left;

}

并修改：

#categories-wrapper ul li {
    width: 30.20833%; /* 290 / 960 */
    border: 1px solid #333;
    position: relative;
    }

这就是你要找的东西吗？