Создание элементов автоматически соответствует ширине родительских таблиц/javascript

Можно ли создать div, содержащий несколько ящиков, которые автоматически соответствуют размеру родителя (распределяются равномерно) без использования таблицы или Javascript? Я понимаю, что это возможно с table-layout:fixed;, но я попытался оживить это, и он, похоже, не очень хорошо работает. Следующая картина - пример того, что я имею в виду:

Я пытаюсь увеличить ширину одного поля внутри div, который затем будет обрабатывать все остальные поля автоматически, чтобы все поля вписывались в div равномерно. Мне нужно, чтобы он был анимированным, а не только мгновенным, и в этом случае я бы просто использовал таблицу. Я также экспериментировал с ним, используя Javascript, анимируя его с помощью -webkit-transition, но это не оказалось очень оживленным. Вместо того, чтобы увеличивать/уменьшать размер, окно, казалось, начинало его ширину при 0px, а затем растягивалось до заданного им размера. (это использовало таблицу с table-layout:fixed. Есть ли чистый способ CSS/HTML для этого, или он требует использования Javascript и/или таблицы?

Ответ 1

Используя фиксированное число детей, это возможно без таблиц (хотя вам нужны табличные дисплеи), вот CSS, который я использовал:

.parent{width:400px;height:100px;display:table}

.parent div{display:table-cell;border:1px solid #000;
    -webkit-transition:width 1s;width:20%}

.parent:hover div{width:10%}
.parent div:hover{width:60%}

Вам нужно вручную рассчитать проценты за лучшие результаты в анимации. Демо-ролик:

http://jsbin.com/ubucod/1

Ответ 2

Если вы хотите, чтобы ящики отображались по клику/касанию, вам нужен Javascript.

Если вы хотите, чтобы ящики отображались только при опрокидывании, вы можете применить css к родительскому элементу, чтобы по умолчанию установить все поля в один процент и изменить их при опрокидывании.

Это решение работает только для фиксированного количества ящиков.

    #Container .box{
        width: 20%;
        transition: width 0.2s;            
    }
    #Container:hover .box{
        width: 10%;
    }
    .box:hover{
        width: 60%;
    }

Я не тестировал его, но он должен работать.

Ответ 3

HTML:

<div class="pushercolumn"></div>
<div class="pushedcolumn">
    <div class="unit"></div>
    <div class="unit"></div>
    <div class="unit"></div>
    <div class="unit"></div>
</div>

CSS

.pushercolumn {
    float: left; 
    width: 30%; /*or whichever you want*/
}

.pushedcolumn {
    overflow: hidden; /* guarantees the .pushedcolumn is pushed horizontally by the floats */
    font-size: 0; /* removes white-space. choose your preferred method*/
}

.unit {
    display: inline-block;
    width: 25%; /* assuming there are 4 boxes in the right column. this is the only variable you have to update based on the circumstances */
}

http://jsfiddle.net/joplomacedo/xYAdR/