1

動的な幅を持つコンテナ内に、DIV のパーセンテージで幅とマージンを持ついくつかの列を作成したいと思います。

例

<div class="gridFluid">
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
</div>

 * {
     margin: 0;
     padding: 0;
 }
 body {
     font-size: 1%
 }
 .gridFluid {
     width: 960px;
     display: table;
     background: #eee;
     font-size: 0px;
     overflow: auto;
     zoom: 1;
 }
 .col-1-4 {
     background: #ddd;
     height: 200px;
     width: 23%;
     display: table-cell;
     *display: inline;
     zoom:1;
     margin-left: 1%;
     margin-right: 1%;
     float: left;
 }

どこでも期待どおりに機能していますが、IE7 では最後の列が 1 行に収まりません。マージン以外の DIV 間に余分なスペースを追加している可能性があります。

IE7 で異なる幅やマージンを使用したくありません (幅: 25 ではなく 24.5%)。適切な解決策ではないからです。私はそれに対する良い解決策を探しています。

IE7 の既知の問題である可能性があります。解決策を探しているときに、それに関連する多くの問題を見つけましたが、問題を解決する適切な方法がありません。

4

3 に答える 3

2

CSS に基づいて簡単な計算をしてみましょう。

各列をコンテナーの幅の 23% にする必要があります。したがって、各列は次のようになります。

.23 * 960 = 220.8

したがって、各列は 220.8 ピクセルにする必要があります。

余白をそれぞれ 1% 幅にします。

.01 * 960 = 9.6

したがって、各余白の幅は 9.6 ピクセルにする必要があります。

ちょっと待って。そこにはいくつかの部分的なピクセルがあります。0.8 または 0.6 のピクセルをどのように処理しますか? さて、あなたはいくつかの丸めをしなければなりません。しかし、切り上げと切り下げのどちらを行うのでしょうか? 端数を切り上げると、221 ピクセルのサイズの 4 つの列になります。

221 * 4 = 884

したがって、列の合計幅は推定 884 ピクセルです。

マージンはどうですか？

8 * 10 = 80

したがって、余白の合計幅は推定 80 ピクセルです。

これらの数字を足し合わせてみましょう。

80 + 884 = 964

うーん... ここに 4 つの余分なピクセルがあるようです... 960px 幅のボックスに収まるように、コンテンツを 1 行下に押し込んだほうがよいでしょう。

そのため、列が押し下げられています。また、チェックアウト: http://ejohn.org/blog/sub-pixel-problems-in-css/

于 2013-04-04T05:13:04.393 に答える
0

ダブルdivはどうですか。それは明らかに問題を解決します。

 .col-1-4 {
     position:relative;
     background: #eee;
     height: 200px;
     width: 25%;
    /*******************************/
    /* Don't use this properties, not necessary here */
     display: table-cell;
     *display: inline;
    /*******************************/
     zoom:1;
     float: left;
 }
 .col-1-4>div {
     background: #ddd;
     position:absolute;
     left:4%;
     right:4%;  /* 100/25 = 4 */
     top:0;
     bottom:0;
 }

働くフィドル

于 2013-04-04T06:39:09.043 に答える
0

cssに少し変更を加えるだけです...

変化する：-

.col-1-4 {
     width: 23%;     
 }

これに:-

.col-1-4 {
     *width: 22.9%; 
     width: 23%;    
 }
于 2013-04-04T05:10:25.623 に答える