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;
    }

我有一个响应式列布局，在这种情况下每行 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-model 和 之间的区别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 回答
2

这是一个浮动明确的问题。您可以使用 inline-block 代替 float，因为 float 已过时。大多数人现在使用display:inline-block，因为不需要clear单独写一行。

参考：

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

于 2016-10-27T12:54:33.587 回答