Не удается получить объекты для выравнивания в нижней части div - PullRequest
Новая
       5

Не удается получить объекты для выравнивания в нижней части div

0 голосов
/ 10 октября 2018

Я пытаюсь получить ряд из пяти изображений для отображения, выровненных внизу в разных масштабах.У меня есть размеры для работы, но почему-то все, что я пытаюсь заставить их сидеть внизу, не работает.Масштабирование правильное, но я просто не могу заставить их сидеть внизу.Я пробовал float, выравнивание по вертикали, положение, основание: 0px ... в тупик ... Нужно ли мне обернуть, в другой div!?

Спасибо за вашу помощь! 

    <html>

<style>
.photos {
  width: 100%;
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;
  height: 500px;
  float: bottom;
}

.one {
  width: 40% !important;
  height: auto !important;
  object-fit:     fill;
  float: bottom;
}

.two {
  width: 70% !important;
  height: 500px !important;
  object-fit: scale-down;
}

.four {
  width: 65% !important;
  height: 500px !important;
  object-fit: scale-down;
}

.six {
  width: 95% !important;
  height: 500px !important;
  object-fit: scale-down;
}

.eight {
  width: 95% !important;
  height: 500px !important;
  object-fit: scale-down;
}

</style>

<div class="photos">

<img class="one" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/One_10_editors_award_e72e0a9f-af53-4d5a-a7ff-ad43529a292e.PNG?16373459996811127802">

<img class ="two" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/TWO-10-500sq.png?16128425807283382807">

<img class="four" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/FOUR-10-800-colour-corrected-800.png?161284258072833828077">

<img class="six" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/Six_main_WEB.jpg?16128425807283382807">


<img class="eight" align="botoom" src="https://cdn.shopify.com/s/files/1/0088/3094/3290/files/EIGHT-10.png?16128425807283382807">

</div>

1 Ответ

0 голосов
/ 10 октября 2018

Я думаю, что хорошим свойством css, которое бы идеально подошло в вашем случае, является использование свойства display: flex.

Установка класса .photo в качестве контейнера flex следующим образом: 

    .photo {  display: flex; }

затем добавьте свойство align в класс .photo, чтобы установить выравнивание для всех его прямых потомков: 

.photo {  align-items: flex-end ; }

Или, если вы хотите добавить отдельно для каждого класса, используйте свойство css align-self 

.one{  align-self: flex-end; }

.two{  align-self: flex-end; }

... и т. Д.

Дополнительная информация: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...