将三列向右对齐答案

【问题标题】：Aligning three columns towards right side将三列向右对齐
【发布时间】：2019-06-21 22:05:04
【问题描述】：

我试图让三列对齐，以便它们都是右侧。这是我到目前为止所拥有的：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>

【问题讨论】：

标签： html css multiple-columns

【解决方案1】：

我认为您正在寻找的 flexbox 处理得很好。

话虽如此。您遇到的问题是您的底部没有最大宽度。

尝试添加：

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

这将使您的项目更靠近在一起，而不会伸展得太远。

我建议使用 flexbox 方法。另一件事是您应该将图像和相关文本包装到包含它们的 div 中。它最终为您提供了更好的响应控制。

我给了你一个我在 codepen 上很快做的例子。

Link to example

【讨论】：

谢谢，这真的很有帮助，我不知道你真的能做到。
很高兴能帮上忙！

【解决方案2】：

为什么不采用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

希望对您有所帮助。干杯！

【讨论】：

谢谢，这帮助很大:)