CSS - Как установить большую ширину div с процентом без округления для заполнения родительского пространства div

Question

У меня есть div, который имеет переменную ширину. Он содержит 6 разделов, которые должны иметь одинаковую ширину. Все эти 6 div, размещенные бок о бок, могут заполнять пространство entiere родительского div.

Как установить ширину дочернего div в CSS, поэтому я уверен, что между границами дочерних элементов и родительским не будет разрыва.

Я пробовал много значений, но в зависимости от размера родительского div, иногда у меня есть пробел с правой стороны, иногда он превышает пределы родительского div, иногда это нормально. Пытается сейчас 16%, 17%, 16,6%, 16,51%, 16,67%

Как это сделать в CSS?

Answer 1

Попробуйте fiddle

Узнайте о дисплее Flex

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Это лучший способ прекратить делать расчеты всегда подходят в сетке

HTML

<div> 
    <p class="p1">1</p> 
    <p class="p1">2</p> 
    <p class="p1">3</p> 
    <p class="p1">4</p> 
    <p class="p1">5</p> 
    <p class="p1">6</p> 
</div> 
<div> 
    <p class="p1">1</p> 
    <p class="p1">1</p> 
    <p class="p1">1</p> 
    <p class="p1">1</p> 
    <p class="p2">2</p> 
</div> 

CSS

div { 
    display:-moz-box; 
    /* Firefox */ 
    display:-webkit-box; 
    /* Safari and Chrome */ 
    display:-ms-flexbox; 
    /* Internet Explorer 10 */ 
    display:box; 
    width:100%; 
    border:1px solid black; 
} 
.p1 { 
    -moz-box-flex:1.0; 
    /* Firefox */ 
    -webkit-box-flex:1.0; 
    /* Safari and Chrome */ 
    -ms-flex:1.0; 
    /* Internet Explorer 10 */ 
    box-flex:1.0; 
    border:1px solid red; 
} 
.p2 { 
    -moz-box-flex:2.0; 
    /* Firefox */ 
    -webkit-box-flex:2.0; 
    /* Safari and Chrome */ 
    -ms-flex:2.0; 
    /* Internet Explorer 10 */ 
    box-flex:2.0; 
    border:1px solid blue; 
}