不使用表格自动对齐另一个div中的多个div

Question

是否可以将此fiddle中的div与父width:100%“自动对齐”？

现在看起来像这样：

[#-#-#-#-#-#--------------------]

但它应该是这样的：

[#-----#-----#-----#-----#-----#]

可以使用CSS完成吗？

Answer 1

是的，你可以，但不幸的是，支持几乎没有。 http://www.w3.org/TR/css3-grid-layout/

您可以使用此polyfill使其工作，但我不会指望它。 https://github.com/codler/Grid-Layout-Polyfill

最好的解决方案是使用table和table-cell：

<div class="table>
    <div class="cell">
        <div class="content">
        </div>
    </div>
</div>

http://jsfiddle.net/hk754/

Answer 2

将您的CSS改为此

.row {
    /*width: 100%;*/
    height: 100px;
    background-color: gray;
    border: 1px solid black;   
}

.common {
    height: 100%; 
    display: inline-block;
    float: left;
}

.one {width: 20%; background-color: #FEC3BF;}
.two {width: 10%; background-color: #FE7777;}
.three {width: 25%; background-color: #FE7777;}
.four {width: 20%; background-color: #FEE826;}
.five {width: 10%; background-color: #FEBD5B;}
.six {width: 15%; background-color: #E6FED0;}

http://jsfiddle.net/hk754/8/