CSS - 如何设置多个div宽度以非圆形百分比填充父div空间

Question

我有一个具有可变宽度的div。 它包含6个div，应该有相同的宽度。 所有这6个div并排放置可填充父div的entiere空间。

如何在CSS中设置子div宽度，因此我确定子边框和父窗口之间不会有空隙。

我已经尝试了很多值，但取决于父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; 
}