0

Никак не могу подобрать правильное решение. Есть карточки с товарами, идут рядами на флексах. При наведении на них курсором в карточку добавляется информация и блок увеличивается по высоте. И когда это происходит он отталкивает нижние блоки, чего быть не должно. Как победить в данной ситуации?

Тыкался через absolute, но всё мимо..

Вот код для примера:

.wrapper {
  border:1px solid black;
  width: 200px;
}

ul {
  display: flex;
  flex-wrap:wrap;
  list-style:none;
}

li {
  margin-right:5px;
  background-color:#efefef;
  border:1px solid red;
}

li:hover {
  height:40px;
}
<div class="wrapper">
  <ul>
    <li>Первый
    
    </li>
    <li>Второй</li>
    <li>Третий</li>
    <li>Четвёртый</li>
    <li>Пятый</li>
  </ul>
</div>

4
  • Высота увеличивается сама, т.к. при наведении добавляется описание в карточку. Проблема ещё в том, что описание добавляется как-бы по центру карточки, то есть нельзя просто абсолютом добавить вниз контент. 19 сен 2018 в 13:42
  • Что-то похоже. Но тут пропадает заголовки "первый, второй и т.д.". Плюс всё таки задача что бы блок увеличивался по высоте вниз, и так никого не "сдвигал". 19 сен 2018 в 14:05
  • codepen.io/topicstarter/pen/pOqwRM?editors=0110 поправил 19 сен 2018 в 14:06
  • Похоже. Я то же так думал сделать. Но проблема в том, что контент добавляется по центру карточки, а не снизу. И в данном случае так не подходит. Вот codepen.io/anon/pen/KxbvBq Контент должен добавиться между заголовком и <p>. 19 сен 2018 в 14:17

1 ответ 1

0

Если понято верно, то как-то так:

.wrapper {
  width: 400px;
  border: 1px solid black;
}

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

li {
  position: relative;
  margin: 5px;
  min-width: 80px;
  min-height: 1em;
  border: 1px solid red;
  background-color: #efefef;
}

li>div {
  position: absolute;
  left: 50%;
  top: 1.2em;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px;
  text-align: center;
  border: 1px dotted blue;
  background-color: #efefef;
  opacity: 0;
  transition: opacity .3s ease;
}

li:hover>div {
  z-index: 1000;
  opacity: 1;
  transition: opacity .3s ease;
}
<div class="wrapper">
  <ul>
    <li>Первый
      <div>1Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta, libero! </div>
      <p>Контент</p>
    </li>
    <li>Второй
      <div>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, laborum! </div>
      <p>Контент</p>
    </li>
    <li>Третий
      <div>3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, pariatur. </div>
      <p>Контент</p>
    </li>
    <li>Четвёртый
      <div>4Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, nam. </div>
      <p>Контент</p>
    </li>
    <li>Пятый
      <div>5Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, voluptate?</div>
      <p>Контент</p>
    </li>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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