流体-流体-流体三柱

Question

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

Page example is here

CSS is here

Answer 1

我会说，这一切都是关于计算正确的百分比。

要重新开始，请删除所有三列上的边框和边距。然后将它们的宽度设置为33.3333%，这样它们都可以完美地放入容器中。

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

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

最后，将你的img设置为100%的宽度，这样它们才能很好地放入容器中。

在那之后，我使用Firebug在你的网站上执行了所有这些更改，看起来它是有效的。

Answer 2

看起来你已经得到了如何让它工作的答案，但是如果你要在这些列上有任何形式的边距或边框，你很快就会遇到另一个问题。

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

解决方案？确保设置box-sizing: border-box; -如果你以前没有听说过它，那就用谷歌搜索它。太神奇了！

Answer 3

你的问题使我有点困惑。一方面，这个例子展示了你想要的东西：

http://jsfiddle.net/JuamW/

另一方面，您的站点的实际示例显示了一种固定宽度的情况，其中您的列不需要是流动的。如果上面的例子不能满足你的需求，你能提供更多的上下文吗？