заполнить div с divs в строке (css)

Question

У меня есть контейнер с размером фикса размером 600 пикселей. Я хочу заполнить некоторым количеством divs (число является динамическим значением) в одной строке.

Что-то вроде этого:

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

Все ящики должны иметь одинаковый размер

Answer 1

Я не уверен, если это то, что вам нужно want..You'll 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 2

Таблица-макет на основе ответа (чистый 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 только для добавления дополнительных дивы, в противном случае он не нужен:

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

Answer 3

Это на самом деле можно решить проблема с чистым CSS, но она не работает во всех браузерах. Ваши вопросы - это любопытное дублирование this. Идея состоит в том, чтобы установить ширину divs на основе их числа.

/* 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%; 
}