4

私は次のCSSを持っています:

#imageContainer {
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
}

.divSelectImage {
    border: 2px solid red;
    width: 25%;
    margin: 0px;
    margin-bottom: 10px;
    float: left;
}

.divSelectImage幅が 25% である理由は、4 つのインスタンスがあります。の中に 4 つの画像がすべて並べて表示されることを期待しています#imageContainer。したがって、基本的には、4 つの画像が 100% を占める必要があり、#imageContainerそれが画面の 100% を占めます。

しかし、私はしません。firebug をチェックしているにもかかわらず、それぞれ 25% で、最後の画像が次の行に移動します。それらが収まるように約 24.5% にする必要がありますが、最後に余白は必要ありません。

これは、Firefox と Google Chrome の両方で発生します。

私が見逃しているCSSの魔法はありますか？どうすればこれを達成できますか?

JSFiddle でシナリオをセットアップしました: http://jsfiddle.net/J3KXE/

4

3 に答える 3

4

これは、各画像の 2 ピクセルの境界線を考慮しておらず、含まれているブロックの幅 100% に加えて 12 ピクセルを追加しているためです。box-sizingCSS の新しいプロパティを使用して、境界線とパディング領域を要素のコンテンツ幅に制限できます。

#imageContainer {
    width: 100%;
    margin: 0px;
    margin-bottom: 10px;
}

.divSelectImage {
    border: 2px solid red;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 25%;
    margin: 0px;
    margin-bottom: 10px;
    float: left;
}

http://jsfiddle.net/J3KXE/1/

于 2013-05-29T16:08:16.527 に答える
1

2 ソリューション:

box-sizing: border-box;

また

flexboxそして、このすべてのたわごと（http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/を参照）

于 2013-05-29T16:07:53.700 に答える
0

2px の境界線があり、ボックスのサイズが 25% に増加し、各側にこれらの 2px が追加されます。IE7 をサポートする必要がない場合は、単純にbox-sizing: border-box を使用できます。古いブラウザーを考慮に入れる必要がある場合は、ボーダー/マージン/パディングなしでラッパー div 幅 25% を宣言し、それらのスタイルを子要素に追加する必要があります。

于 2013-05-29T16:08:02.163 に答える