0

Container幅が100％のDivという名前があります。そのため、ピクセル単位の実際の幅は、ユーザーごとに変わる可能性があります。その中にContainer、それぞれ次の値を持つ10個のボックスがあります。

width:8%;
margin-left:1%;
margin-right:1%;
border:1px solid #000000;
float:left;

これらの値を使用すると、このようにレンダリングされるはずですよね？

それはどのようにあるべきか

実際にはそうではありません。ボックスのスペースの幅は8％、スペースの幅は2％（マージン）で、境界線（1px）があるため、すべてのボックスの幅は10％+2pxです。

解像度で遊ぶと、ボックスが2行目を延長していることが時々わかり、次のように表示されます。ここに画像の説明を入力してください

このレイアウトを修正するにはどうすればよいですか？

外箱の境界線を設定する別の箱をそれらの箱の中に置くことを考えましたが、それは私にとってはうまくいきませんでした。

4

1 に答える 1

1

このためにjsfiddleを作成しました。内部ボックスごとに新しいdivを追加し、次のプロパティを設定すると、問題が解決します。（重要なのは、境界線をアウトボックスからインナーボックスに移動することでした。）

width: 100%;
height:100%;
border: 1px solid #000000;
于 2012-10-04T00:22:30.673 に答える