@devopg

У дива появляется пустое место, как исправить?

Есть строка фиксированной высоты, в ней расположены items , каждый item содержит заголовок , картинку и кнопки. Картинка отображается с сохранением пропорцией.
Вопрос как пофиксить пустое место:

Sandbox: https://codepen.io/krosert/pen/QWNNVxg

Как выглядит сейчас:
yULte.png
Как нужно:
s9TZ6.png

Код:

<div class="panel">
  <div class="item">
    <span class="title">first item</span>
    <img src="https://i.ibb.co/JQMJ3BW/2311f3c1-2802-417f-9b7e-2147f066e260.jpg">
    <div class="btns">
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  </div>
  <div class="item">
    <span class="title">second item</span>
    <img src="https://i.ibb.co/wMyyz1n/934tvi5uykv2.jpg">
    <div class="btns">
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  </div>
  <div class="item">
    <span class="title">third item</span>
    <img src="https://i.ibb.co/g6HKc3w/7ba51b63-e4f2-436e-9148-c722b0df49cd.jpg">
    <div class="btns">
      <button>1</button>
      <button>2</button>
      <button>3</button>
    </div>
  </div>
</div>

.panel{
      position: fixed;
      background-color: #685;
      top: 30px;
      height: 200px;
      display: flex;
      width: 100%;
    }
    .item{
      margin: 6px;
      border: 2px solid black;
      background-color: #553;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      box-shadow: 0 0 5px;
      max-width: 300px;
    }
    img {
      max-height: 100%;
      max-width: 100%;
      height: auto;
      width: auto;
      min-height: 0;
      min-width: 0;
    }
  • Вопрос задан
  • 194 просмотра
Пригласить эксперта
Ответы на вопрос 2
kocherman
@kocherman
Добавь в CSS:
.item span, .item img{display:block;}
Ответ написан
Cheddi
@Cheddi
Front-end Developer
.item{
position: relative;
justify-content: space-between;
}

img {
position: absolute;
top: 25px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы