2

Хочу сделать блоки как https://wp-kama.ru/id_7686/miniatyury-dlya-elemetov-taksonomij.html, а именно речь об этом:

Вот что получилось, но.. не получилось :( : Они сжимаются, а не перекрываются. Что я упустил, как поправить?

div.inner {
  background-color: white;
  display: flex;
  height: 15em;
  width:800px;
}

figure {
  box-shadow: -0.8em 0 2em -1em #222a2d;
  flex: 1 1 20%;
  margin: 0;
  overflow: hidden;
  padding: 1em 1em 0;
  transition: flex 300ms cubic-bezier(1, 0, 1, 1) 0s, -webkit-box-flex 300ms cubic-bezier(1, 0, 1, 1) 0s, -ms-flex 300ms cubic-bezier(1, 0, 1, 1) 0s;
}

figure:hover {
  -moz-box-flex: 0.001;
  flex: 0.001 0.001 calc(400px + 2em);
}
<div class="inner">
<figure><h3 class="widget-price-title">Однажды, в студеную зимнюю пору</h3>
<div class="textwidget"><p>Однажды, в студеную зимнюю пору,<br>
Я из лесу вышел; был сильный мороз.
</p><p>Гляжу, поднимается медленно в гору<br>
Лошадка, везущая хворосту воз.</p></div>
</figure>

<figure><h3 class="widget-price-title">И, шествуя важно</h3>
<div class="textwidget"><p>И, шествуя важно, в спокойствии чинном,<br>
Лошадку ведет под уздцы мужичок<br>
</p><p>В больших сапогах, в полушубке овчинном,<br>
В больших рукавицах... а сам с ноготок!<br>
</p></div>
</figure>

<figure><h3 class="widget-price-title">Здорово, парнище!</h3>
<div class="textwidget"><p>— Здорово, парнище!— «Ступай себе мимо!»<br>
— Уж больно ты грозен, как я погляжу!<br>
</p><p>Откуда дровишки?— «Из лесу, вестимо;<br>
Отец, слышишь, рубит, а я отвожу».<br>
</p></div>
</figure>

<figure><h3 class="widget-price-title">В лесу раздавался топор дровосека</h3>
<div class="textwidget"><p>(В лесу раздавался топор дровосека.)<br>
— А что, у отца-то большая семья?<br>
</p><p>«Семья-то большая, да два человека<br>
Всего мужиков-то: отец мой да я...»...
</p></div>
</figure>
</div>

Код: http://www.cssdesk.com/Dmusw

2 ответа 2

1

Вам нужно задать минимальную ширину для вложенных элементов тега figure

.widget-price-title,
.textwidget {
  min-width: 400px;
}

div.inner {
  background-color: white;
  display: flex;
  height: 15em;
  width:800px;
}

figure {
  box-shadow: -0.8em 0 2em -1em #222a2d;
  flex: 1 1 20%;
  margin: 0;
  overflow: hidden;
  padding: 1em 1em 0;
  transition: flex 300ms cubic-bezier(1, 0, 1, 1) 0s, -webkit-box-flex 300ms cubic-bezier(1, 0, 1, 1) 0s, -ms-flex 300ms cubic-bezier(1, 0, 1, 1) 0s;
}

figure:hover {
  -moz-box-flex: 0.001;
  flex: 0.001 0.001 calc(400px + 2em);
}
<div class="inner">
<figure><h3 class="widget-price-title">Однажды, в студеную зимнюю пору</h3>
<div class="textwidget"><p>Однажды, в студеную зимнюю пору,<br>
Я из лесу вышел; был сильный мороз.
</p><p>Гляжу, поднимается медленно в гору<br>
Лошадка, везущая хворосту воз.</p></div>
</figure>

<figure><h3 class="widget-price-title">И, шествуя важно</h3>
<div class="textwidget"><p>И, шествуя важно, в спокойствии чинном,<br>
Лошадку ведет под уздцы мужичок<br>
</p><p>В больших сапогах, в полушубке овчинном,<br>
В больших рукавицах... а сам с ноготок!<br>
</p></div>
</figure>

<figure><h3 class="widget-price-title">Здорово, парнище!</h3>
<div class="textwidget"><p>— Здорово, парнище!— «Ступай себе мимо!»<br>
— Уж больно ты грозен, как я погляжу!<br>
</p><p>Откуда дровишки?— «Из лесу, вестимо;<br>
Отец, слышишь, рубит, а я отвожу».<br>
</p></div>
</figure>

<figure><h3 class="widget-price-title">В лесу раздавался топор дровосека</h3>
<div class="textwidget"><p>(В лесу раздавался топор дровосека.)<br>
— А что, у отца-то большая семья?<br>
</p><p>«Семья-то большая, да два человека<br>
Всего мужиков-то: отец мой да я...»...
</p></div>
</figure>
</div>

4
  • Спасибо, всё почти класс, кроме последнего блока. Он тоже становиться обрезанным, как и остальные. Не затруднит ли поправить этот момент?
    – Вася
    17 окт 2019 в 8:56
  • @Вася Не пойму о чем. Можно поподробнее.
    – E_K
    17 окт 2019 в 12:53
  • В последнем блоке обрезано содержимое i.imgur.com/5Dw2a5w.jpg Хотелось бы что бы оно было развернуто по умолчанию i.imgur.com/Mfxl8Dp.jpg и сворачивалось когда hover на др блоках. ... {Пока это писал - кажется начал понимать как это сделать :) Но всё равно буду благодарен за помощь.. для контроля и понимания правильности моих потуг.}
    – Вася
    17 окт 2019 в 13:44
  • @Вася у вас ширина inner` 800px, изначально блоки figure занимают по 20% (160px) от размеров inner, а дочерние блоки figure больше чем эти 20% из за чего они выглядят обрезаными.
    – E_K
    17 окт 2019 в 14:16
0
figure > * {
 min-width: 400px;
}
1
  • Благодарю. К сож низкая моя репа не даёт возможности поставить плюсик.
    – Вася
    17 окт 2019 в 8:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.