Позиционирование и ширина блоков

103

17 сентября 2021, 16:10

Хочу сделать блоки как 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

Answer 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>

Answer 2