Question

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

Answer 1

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

希望有帮助。干杯！

Answer 2

我认为您正在寻找的Flexbox手柄非常完美。

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

尝试添加：

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

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

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

我给了你一个例子，我很快就在Codepen上做了。

Link to example

向右对齐三列

2 个答案: