Выровнять div по основанию содержимого без использования абсолютного положения - PullRequest
Новая
       35

Выровнять div по основанию содержимого без использования абсолютного положения

0 голосов
/ 06 июня 2019

Я знаю, что этот вопрос задавался несколько раз, но я все еще вижу ответ на вопрос об использовании ... 

postion: absolute;
bottom: 0;

Однако в моем случае это не сработало, поэтому искал другие предложения.

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

У меня есть изображение слева, которое имеет ширину 145 пикселей, но может отличаться по высоте.

Справа у меня есть div, который содержит 2 div (TimelineAddress & TimelineFavouriteUser) с интервалами внутри каждого. Один для адреса свойства, а другой с именем пользователя и некоторым текстом. Я бы хотел, чтобы div TimelineFavouriteUser располагался внизу, чтобы он был на одной линии с нижней частью изображения. См. Диаграмму ниже. 

 ----------- ----------------------------
|Image      | Address - Dynamic Length   |
|Can be     |                            |
|different  |                            |
|heights    |                            |
|           |                            |
|           |                            |
|           |                            |
|           |                            |
|           | User and text at bottom    |
 ----------- ----------------------------

Этого можно добиться с помощью 

postion: absolute;
bottom: 0;

Однако, когда речь идет об отзывчивости и более низких разрешениях, адрес может перекрывать текст внизу, так как текст адреса разбивается на все больше и больше строк. Смотрите изображение ниже.

enter image description here

Я использовал некоторый javascript для динамического добавления правильного margin-top в TimelineFavouriteUser, хотя я бы предпочел решение только с CSS, так как функция, выполняющая вычисление для значения margin-top, вызывается много раз, поскольку на экране могут быть сотни этих элементов.

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

Если нет, то, возможно, я могу найти решение для браузеров, где flex не поддерживается, если flex - лучшее решение.

У меня есть JSFiddle , если вы хотите проверить его сами.

Ответы [ 3 ]

0 голосов
/ 06 июня 2019

непроверенная.С префиксом поставщика CSS. 

div {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr;
      grid-template-columns: 1fr 2fr;
  -ms-grid-rows: 2fr 1fr;
      grid-template-rows: 2fr 1fr;
  height: calc(100vh - 1rem);
  width: 100%;
}

section {
  background-color: lightpink;
}

section:first-child {
  background-color: lightblue;
  -ms-grid-row-span: 2;
      grid-row-end: span 2;
}

section:last-child {
  background-color: lightgreen;
}
<div>
  <section>X</section>
  <section>y</section>
  <section>z</section>
</div>
0 голосов
/ 06 июня 2019

Я бы порекомендовал вам полифилл для flexbox, может быть что-то вроде: https://github.com/jonathantneal/flexibility

в противном случае вам придется возиться с отображением: таблица, числа с плавающей запятой и жестко запрограммированные значения пикселей

0 голосов
/ 06 июня 2019

Вы можете использовать flex для того же 

align-items:flex-end;

Вот скрипка https://jsfiddle.net/karantewari/pw4hsqry/

...