1

幅 1000px の div コンテナがあり、その中に幅 33.333333% の 3 つの div があり、すべて float:left です。

この 99.999999% でカバーされない 1 つまたは 2 つのピクセル幅があり、100% 幅のコンテナー div が表示されます (右側の図の赤いピクセルを参照)。

どうすればこれを修正できますか?

ピック

4

5 に答える 5

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 に答える
0

CSS のパーセンテージ幅は、それぞれ個別に計算されます。そのため、333px の div が 3 つになり、1 つのピクセルが残ります。

親要素の幅が固定されている場合は、3 つの列を適切なサイズ (333px、334px、333px) に設定して、コンテナーを埋めます。パーセンテージは必要ありません！

于 2013-11-03T00:41:56.917 に答える
0

これを試して：

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