Я хочу иметь строку с двумя столбцами (обе жидкости), когда я нахожу элемент в одном столбце, он будет показывать содержимое горизонтальным слайдом, это должно сделать столбец шире, а значит, и другого менее широкого. Возможно ли это в чистом CSS?
[ Left column fluid (elementX)][Right column fluid]
На мыши над (elementX) мы получим что-то вроде этого:
[ Left column fluid (elementXxxxxxx)][Right col...]
Вот пример, который мог бы лучше проиллюстрировать его:
Является ли это выполнимым в чистом CSS? Если да, то как?
Вот скрипка: http://jsfiddle.net/hvh29/3/
Вы можете использовать display: table-cell;
или вы можете использовать display: flex;
также, поэтому я вношу свой вклад в гибкость в качестве своего последнего и много снисходительного по сравнению с display: table-cell;
метод, который был старым способом достижения так...
.wrap {
display: flex;
}
.wrap .col {
min-height: 100px;
background: #eee;
width: 50%;
-webkit-transition: all .5s;
transition: all .5s;
}
div.wrap > div:nth-of-type(1) {
background: #aaa;
}
div.wrap > div:hover {
width: 70%;
}
Я ответил на аналогичный один над здесь