web-dev-qa-db-ja.com

ボックスサイズ：border-boxが機能していないようです

私はこの問題に遭遇したことはありませんが、一言で言えば、すべての要素にボックスサイズとしてボーダーボックスを適用します。

*, *:before, *:after {

      -webkit-box-sizing: border-box !important;
      -moz-box-sizing: border-box !important;
      -ms-box-sizing: border-box !important;
      box-sizing: border-box !important;
    }

私はレスポンシブな列レイアウトを持っています。この場合、行ごとに3列です。

<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>..</p>
   </div>

   <!-- more divs here -->
</div>

.property divにマージンを追加するまで、すべてが3つの列にうまく広がります。通常、ボーダーボックスが原因で、列間にマージンが追加され、3行のままになりますが、何らかの理由で3番目の列が新しい列にプッシュされます。行、私は正直に理由を理解していません、私は何かが欠けていますか？

これがjsFiddleのライブ例です： http://jsfiddle.net/NmrZZ/

htmlcssborder-box
5
Ilja

マージンはボックスモデル（使用するボックスサイズに関係なく）の一部ではないため、宣言した幅+パディング+境界線に常に追加されます。

以下の画像（このトピックに関する CSSトリック の記事から）は、標準のボックスモデルとbox-sizing: border-boxの違いを示しています。

enter image description here

私ができる最善のアドバイスは、グリッドの余白を完全に避け、プレゼンテーションから分離しておくことです。これはより多くのマークアップを意味しますが、頭痛の種を減らし、物事を維持するのをはるかに簡単にします。あなたの例の このフォーク をチェックしてください。修正されたCSS：

.span-4-12 {
    width: 33.33%;
    padding-left: 2%;
}

.property {
    background: white;
}

そして、新しいマークアップは次のようになります。

<div class="column span-4-12">
    <div class="property">
        <p>Some text 1</p>
    </div>
</div>
28
CherryFlavourPez

それはフロートクリアの問題です。 floatは古くなっているため、floatの代わりにinline-blockを使用できます。別の行にclearを書く必要がないため、ほとんどの人は現在display:inline-blockを使用しています。

参照：

*, *:before, *:after {
        margin: 0;
        padding: 0;

        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        -ms-box-sizing: border-box !important;
        box-sizing: border-box !important;
}

body {
    background: grey;
}
}

.row {
        clear: both;
}

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clear {
    zoom:1;
}

.column {
        display: inline-block;
        }

.span-4-12 {
        width: 30%; 
}

.property {
    background: white;
    margin-left: 2%;
}
<div class="row clearfix">
   <div class="column span-4-12 property">
      <p>Some text 1</p>
   </div>
    
    <div class="column span-4-12 property">
      <p>Some text 2</p>
   </div>
    
    <div class="column span-4-12 property">
      <p>Some text 3</p>
   </div>
</div>
1
Ayyappan K