1

我有一个宽度为 1000 像素的 div 容器，其中三个 div 宽度为 33.333333%，全部为 float:left。

99.999999% 可能没有覆盖 100% 宽度的容器 div 显示的一两个像素的宽度（参见右侧图片红色像素）。

我该如何解决这个问题，最好不要将其设置为四个 div，每个 div 甚至 25%？

图片

4

5 回答 5

3

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

如果你只在前两个元素上设置 and ，然后在第三个元素上设置floator （只是 not ），那么魔法会自动填充剩余的空间，这样就永远不会有间隙。widthoverflow: hiddenoverflow: autovisible

请参阅这个小提琴示例，我已经覆盖了:last-childdiv 的值以实现这一点。

于 2013-11-03T02:11:33.270 回答
1

这有效：

<!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/

于 2013-11-03T00:42:41.437 回答
1

您需要 box-sizing 属性：

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

于 2013-11-03T01:14:56.720 回答
0

试试这个：

display: inline-block;
margin: 0;
padding: 0;
于 2013-11-03T00:35:02.183 回答
0

CSS 中的百分比宽度都是独立计算的。因此，您最终会得到三个 333px 的 div，并剩下一个像素。

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

于 2013-11-03T00:41:56.917 回答