Выравнивание трех столбцов по правой стороне - PullRequest
Новая
       12

Выравнивание трех столбцов по правой стороне

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

Я пытаюсь выровнять три столбца так, чтобы они были правильной стороной.Вот что у меня есть: https://prnt.sc/o5284n И вот как это должно работать: https://prnt.sc/o528y3

Мне удалось решить эту проблему, применив поля к сторонам изображений,но это становится действительно запутанным, поскольку веб-страница становится меньше.

Я рассмотрел много других опций, таких как плавающий пробел и пробел в колонке, но в этом случае это не работает для меня 

 <section id="bottom">
  <img src="Appify.png" alt="app" width="310" height="200" class="pad">
  <p class="twenty_f">APPIFY</p>
  <img src="sunflower.jpeg" alt="flower" width="310" height="200" class="pad">
  <p class="twenty_f">SUNFLOWER</p>

  <img src="bokeh.jpeg" alt="bokeh" width="310" height="200" class="pad">

  <p class="twenty_f">BOKEH</p>

</section>

Ответы [ 2 ]

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

Я думаю, что вы ищете flexbox отлично справляется.

Это, как говорится. Проблема, с которой вы сталкиваетесь, заключается в том, что у вас нет максимальной ширины в нижней части.

Попробуйте добавить: 

section#bottom {
  max-width: 1000px;
  text-align: center;
}

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

Хотя я предлагаю использовать метод flexbox. Другое дело, что вы должны обернуть свои изображения и связанный текст в div, который содержит их вместе. Это дает вам лучший контроль в конце.

Я привел вам пример, который я быстро сделал на codepen.

Ссылка на пример

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

Почему бы не пойти с flexbox подходом. Попробуйте это: 

#bottom {
  display: flex;
  justify-content: space-around;
}
#bottom div {
  text-align: center;
  margin-right: 10px;
}
<section id="bottom">
  <div>
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="app" width="310" height="200" class="pad">
    <p class="twenty_f">APPIFY</p>
  </div>
  <div>
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="flower" width="310" height="200" class="pad">
    <p class="twenty_f">SUNFLOWER</p>
  </div>
  <div>
    <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="bokeh" width="310" height="200" class="pad">
    <p class="twenty_f">BOKEH</p>
  </div>

</section>

См .: https://www.w3schools.com/css/css3_flexbox.asp

Надеюсь, это поможет. Ура! * * 1013

...