Динамическая ширина с несколькими элементами

Question

Я пытаюсь найти чистый способ CSS, чтобы иметь один или несколько элементов inline и настроить их ширину для заполнения контейнера, например.

1 элемент

[------]

2 элементы

[--- ***]

3 элементы

[- * * ..]

Является ли это достижимым благодаря чистому CSS?

Answer 1

использование дисплея: таблица на родительском устройстве и отображение: таблица-ячейка для детей. , то вы можете добавить столько внутренних div, сколько пожелаете. Как это:

HTML

<div class="container"> 
    <div class="inner">1</div> 
    <div class="inner">2</div> 
    <div class="inner">3</div> 
</div> 

CSS:

.container { 
display: table; 
    width: 500px; 
    height: 300px; 
    outline: 1px solid red; 
} 

.inner { 
    display: table-cell; 
    outline: 1px solid blue; 
} 

вот скрипку: http://jsfiddle.net/w8p2nj9z/