Можно ли создать div, содержащий несколько ящиков, которые автоматически соответствуют размеру родителя (распределяются равномерно) без использования таблицы или Javascript? Я понимаю, что это возможно с table-layout:fixed;, но я попытался оживить это, и он, похоже, не очень хорошо работает. Следующая картина - пример того, что я имею в виду:
Я пытаюсь увеличить ширину одного поля внутри div, который затем будет обрабатывать все остальные поля автоматически, чтобы все поля вписывались в div равномерно. Мне нужно, чтобы он был анимированным, а не только мгновенным, и в этом случае я бы просто использовал таблицу. Я также экспериментировал с ним, используя Javascript, анимируя его с помощью -webkit-transition, но это не оказалось очень оживленным. Вместо того, чтобы увеличивать/уменьшать размер, окно, казалось, начинало его ширину при 0px, а затем растягивалось до заданного им размера. (это использовало таблицу с table-layout:fixed. Есть ли чистый способ CSS/HTML для этого, или он требует использования Javascript и/или таблицы?
Используя фиксированное число детей, это возможно без таблиц (хотя вам нужны табличные дисплеи), вот 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%}
Вам нужно вручную рассчитать проценты за лучшие результаты в анимации. Демо-ролик:
Если вы хотите, чтобы ящики отображались по клику/касанию, вам нужен Javascript.
Если вы хотите, чтобы ящики отображались только при опрокидывании, вы можете применить css к родительскому элементу, чтобы по умолчанию установить все поля в один процент и изменить их при опрокидывании.
Это решение работает только для фиксированного количества ящиков.
#Container .box{
width: 20%;
transition: width 0.2s;
}
#Container:hover .box{
width: 10%;
}
.box:hover{
width: 60%;
}
Я не тестировал его, но он должен работать.
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 */
}