css - 流体-流体-流体三柱

Question

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

页面示例在这里

CSS 在这里

Answer 1

It looks like you already got an answer on how to get it working, but you'll quickly run into another problem if you're going to have any sort of margin or border on these columns.

Those width percentages? They don't include border/margin - so if you add either of those, you'll once again have columns overflow.

Solution? Make sure to set box-sizing: border-box; - if you haven't heard of it before, Google it. It's magical!

Answer 2

your question puzzles me a bit. On the one hand, this example shows what you sound like you're asking for:

http://jsfiddle.net/JuamW/

On the other hand, the actual example of your site shows a fixed-width situation where your columns have no requirement to be fluid. If the above example doesn't give you what you need, could you provide some more context?

Answer 3

我想说这都是关于计算正确的百分比。

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

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

其次，切换border到 anoutline以防止在布局中添加不必要的宽度。

最后让你img的 s 宽度为 100%，这样它们就可以很好地放入容器中。

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

Answer 4

如果你想把最后一个 li 拿出来，请添加：

#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;
    }

那是你要找的吗？