Выравнивание изображения снизу внутри элемента flexbox li - PullRequest
Новая
       20

Выравнивание изображения снизу внутри элемента flexbox li

0 голосов
/ 11 марта 2019

Я пытаюсь создать макет твиттера с помощью Flexbox

Я так далеко, но теперь я застрял!

Я бы хотел, чтобы каждый элемент li растягивался по вертикали с помощью flexbox, чтобы соответствовать высоте самого длинного твита, что я и сделал.

Теперь я пытаюсь выровнять изображения по нижнему краю каждого из его родительских элементов li (чтобы вы не видели синего цвета под любым из изображений).

У кого-нибудь есть идеи, где я совершаю ошибку, пожалуйста?

Полный код на Codepen: https://codepen.io/anon/pen/mvGaXQ

<html>
  <body>
    <div style="height:600px; color:#fff; padding:50px; background-color:#000;">
      <div id="example1"></div>
    </div>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 11 марта 2019

Возможно, вы захотите поиграть с display: flex;; Затем сделайте детей, которые могут иметь немного другую высоту, чтобы flex: 1;

Для вашего случая, Сделай родителя ul li {display: flex; flex-direction: column;}; то 

.tweet,
.timePosted {
  flex: 1;
}

Вот рабочий пример. https://codepen.io/anon/pen/LazPpE

Также, если вы хотите узнать больше о flex, я настоятельно рекомендую вам посетить эту ссылку и эту игру .

0 голосов
/ 11 марта 2019

Вы пытались установить положение li относительно и затем установить абсолютное значение img?Я также установил минимальную высоту для li для правильного отображения изображений.

li: 

ul li {
  list-style:none;
  overflow:hidden;
  border:1px solid #dedede;
  margin:5px;
  position: relative;
  min-height: 550px;
  max-width:300px;
  display:inline-block;
  text-align: left;
  vertical-align:top;
  background-color: #417abd;
}

img: 

.media img {
  max-width:100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...