css - 用 div 连续填充 div (css)

Question

我有固定大小为 600px 的 div 容器。我想在一行中填充一些 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'));
});

Answer 2

我不确定这是否是你想要的......不过你需要 javascript（我知道你没有在这里标记它）：http: //jsfiddle.net/QheN7/

屏幕截图：

CSS：

.container{
    overflow:auto;
    border:1px solid #000;
    width:600px;
}

.child{
    float:left;
    height:20px;
}

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

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

HTML：

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<button>Add div</button>

JS：

$(function(){
    function setWidth(){
        var container = $('.container'),
            children = $('.child'),
            containerWidth = container.width(),
            noOfChildren = children.length;
        children.width(containerWidth/noOfChildren);
    }
    $('button').on('click', function(){
        var newChild = $('.container').find('.child').first();
        newChild.clone().appendTo($('.container'));
        setWidth();
    });
    setWidth();
});

Answer 3

用纯CSS其实是可以解决问题的，但并不是在所有的浏览器中都有效。你的问题有点重复这个问题。这个想法是根据它们的数量设置 div 的宽度。

/* one item */
li:nth-child(1):nth-last-child(1) {
    width: 100%;
}

/* two items */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
    width: 50%;
}

/* three items */
li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}