12

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

*, *: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;
    }

私はレスポンシブな列レイアウトを持っています。この場合、1 行あたり 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/

4

2 に答える 2

48

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

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

ここに画像の説明を入力

私ができる最善のアドバイスは、グリッドの余白を完全に避けて、プレゼンテーションから分離しておくことです。これはより多くのマークアップを意味しますが、頭痛の種が減り、保守がはるかに簡単になります。あなたの例のこのフォークをチェックしてください。修正された 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>
于 2014-03-07T15:04:41.223 に答える