Какова минимальная ширина этого div

Question

Хорошо. Я пытаюсь найти, что должно быть минимальной шириной row1. На данный момент это 791px, но я не понимаю математику за ней.

• Есть 2 x 10px прокладки влево и вправо. = 20px
• Каждая коробка имеет ширину 75 пикселей. Есть 10 коробок. = 750px
• Каждая коробка имеет 1px границу на правой и левой = 20px (10 коробок * 2px)
• Все коробки также имеют запас 2px на правом для последнего ребенка, за исключением = 18px (9 * 2px)

Это дает мне всего 808 пикселей. Это должна быть минимальная ширина row1.

HTML

<div class ="board"> 
    <div class ="row1"> 
           <div class="box"></div> 
           <div class="box"></div> 
           <div class="box"></div> 
           <div class="box"></div> 
           <div class="box"></div> 
           <div class="box"></div> 
           <div class="box"></div> 
           <div class="box"></div> 
           <div class="box"></div> 
           <div class="box"></div> 
    </div> 

</div> 

CSS /* Совет Структура */

.board{ 
    background: #EBEBE0; 
    height: 200px; 
    padding: 10px; 
    overflow: auto; 
    width: 835px; 
} 
.row1{ 
    background: #FFDCDC; 
    height: 52px; 
    padding: 10px; 
    overflow: auto; 
    width: 791px; 
} 
/* Position Boxes*/ 
.box{ 
    width: 75px; 
    height: 50px; 
    border: 1px solid #000; 
    float: left; 
    margin-right: 2px; 
} 
div.box:last-child { 
margin-right: 0; 
} 

Answer 1

75 * 10 = 750 - десять коробок
10 * 2 = 20 - заполнение по строке
9 * 2 = 18 - маржа на каждую коробку, за исключением последних

Это составляет до 788, что, вероятно, является номером, который вы ищете. Это Fiddle показывает, что квадраты расположены внутри строки с равным пространством слева и справа.

Обратите внимание, содержимое DIV не водите его размер, когда вы явно установить его в CSS:

.row1{ 
    background: #FFDCDC; 
    height: 52px; 
    padding: 10px; 
    overflow: auto; 
    width: 790px; /* explicit div width*/ 
} 

Если вы поставите элементы, которые подведем будет добавить до более чем 791px, то он будет создан полосу прокрутки для переполнения. Это также основано на вашем CSS. Но, поскольку для полей установлено значение float, они не будут вносить вклад в сумму переполнения.

Answer 2

Минимальная ширина для row1 - 788px.

75px * 10 = 750px // width 
2px * 10 = 20px // border 
2px * 9 = 18px // margin 
788px    // total 

Если вы хотите, содержащий ширину, было бы 788px + 20px