您可以获得准确而灵活的解决方案

如果您只float并在前两个元素上设置width，然后设置overflow: hidden或overflow: auto（仅非visible）第三个元素，然后the magic works自动填充剩余空间，以便永远不会成为一个空白。

See this fiddle example，我已覆盖:last-child div的值以实现此目的。

Answer 2

这有效：

<!DOCTYPE html>
<html>
<head>
    <style>
        div.container {
            width: 1000px;
            padding: 10px;
            background: #5cabc1;
            overflow: hidden;
        }

        div.box {
            box-sizing: border-box;
            -moz-box-sizing: border-box; /* Firefox */
            width: 33.3%;
            float: left;
        }

        div.b1 {
            background: #fca502;
        }

        div.b2 {
            background: #ffff00;
        }

        div.b3 {
            background: #afcfe4;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box b1">div 1</div>
        <div class="box b2">div 3</div>
        <div class="box b3">div 3</div>
    </div>
</body>
</html>

http://jsfiddle.net/sVu4R/5/

Answer 3

您需要使用box-sizing属性：

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 4

试试这个：

display: inline-block;
margin: 0;
padding: 0;

Answer 5

CSS中的百分比宽度各自独立计算。因此，你最终得到三个333px div，剩下一个像素。

如果父元素具有固定宽度，只需将三列设置为适当的大小（333px，334px，333px）即可填充容器。不需要百分比！

三个分区容器并排：33.3333333％不工作？

5 个答案:

您可以获得准确而灵活的解决方案