кажется, что коробка-проклейка: граница-бокс не работает

Question

Я никогда не сталкивался с этим вопросом, но в двух словах я применяю границы окна, как мои коробчатых размерами для всех элементов:

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

Все охватывает хорошо через 3 колонки, пока я не добавить маржу .Property Свойство DIV, в настоящее время, как правило, из-за границы коробки это было бы просто добавить границы между столбцы и оставить их 3 подряд, но теперь по какой-то причине третий столбец переместится в новую строку, я хо гневно не понимаю, почему, я что-то упускаю?

Вот живой пример на jsFiddle: http://jsfiddle.net/NmrZZ/

Answer 1

маржа не является частью коробки-модель (независимо от коробчатых размеров вы используете), поэтому он всегда будет в дополнении к ширине + обивке + границам вас» объявлен.

Изображение ниже (от CSS Tricks статьи по этой теме) иллюстрирует разницу между стандартной коробкой-модели и box-sizing: border-box:

Лучший совет, который я могу дать, чтобы избежать полей для сетки полностью и сохранить его отдельно от вашей презентации. Это означает большую разметку, но сэкономит вам головные боли и упростит работу. Проверьте this fork вашего примера. Измененный 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>  

Answer 2

Это поплавок ясно проблема. Вместо float вы можете использовать встроенный блок, поскольку float устарел. Большинство людей теперь используют display:inline-block, так как нет необходимости писать clear для отдельной строки.

См:

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

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

 
body { 
 
    background: grey; 
 
} 
 
} 
 

 
.row { 
 
\t clear: both; 
 
} 
 

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

 
.column { 
 
\t display: inline-block; 
 
\t } 
 

 
.span-4-12 { 
 
\t 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>