用div连续填充div(css)

Question

我有div容器,固定大小600px.我想在一行中填充一些div (数字是动态值).

像这样的东西:

|---------------------------container-------------------------|
|----box1----||----box2-----||-----box3-----||------box4------|

所有盒子必须具有相同的尺寸

Answer 1

基于表格布局的答案(纯CSS):http://jsfiddle.net/QheN7/1/

HTML:

<div class="container">
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
</div>
<button>Add div</button>

CSS:

.container{
    display:table;
    border:1px solid #000;
    width:600px;
    height:20px;
}

.child{
    display:table-cell;
    height:20px;
}

.child:nth-child(odd){
    background-color:#aaa;
}

.child:nth-child(even){
    background-color:#666;
}

我只使用JS添加更多div,否则不需要:

$('button').on('click', function(){
    var newChild = $('.container').find('.child').first();
    newChild.clone().appendTo($('.container'));
});