左对齐画廊的最后一行

Question

我有一个图片库，如下所示：

代码如下：

<div class="wrapper">
    <div id="squares">
        <a href="yourlinkhere1.php"><img src="images/galleryimage1.jpg"></a>
        <h5>IMG_114</h5>
    </div>
    <div id="squares">
        <a href="yourlinkhere2.php"><img src="images/galleryimage2.jpg"></a>
        <h5>IMG_115</h5>
    </div>
</div>

CSS 看起来像：

.wrapper {
    background: #ff0000;
    text-align: center;
}

#squares {
    background: #00ff00;
    display: inline-block;
    vertical-align: top;
    width: 300px;
}

#squares img {
    max-height: 200px;
    width: auto;
}

#squares h5 {
    margin: 20px 0;
}

我喜欢结果，但我希望 IMG_117 在 IMG_114 下对齐，同时保持绿色区域居中，div 中的内容居中...不确定如何让 div 左对齐而不使其他东西不居中。

我认为这可能是对我的 css 的快速调整，或者可能 jQuery 向 IMG_117 行添加两列。我看到的问题是这是动态内容，我不会总是知道最后一行有多少...可能是一个、两个或三个，如果有一些 jQuery 则需要检查并查看行中有多少项，然后添加缺少的列。

我不确定哪种方法最简单，或者是否有更好的解决方案...有没有人有任何想法或者谁能给我指出正确的方向？

谢谢，
乔什

Answer 1

首先将html中的所有id="squares"替换为class="squares" 和#squares with .squares

id - 意味着页面上 DOM 元素的唯一标识符

然后添加到您的 css:

.squares {
   float: left; /* all elements will tend to left*/
}
.wrapper {
  clear: both; /* reset rules of floating for the next elements*/
}

Answer 2

您可以使用 flexbox 解决方案以获得更流畅和灵活的布局，请参阅下面 codepen 上的解决方案。

.wrapper {
    background: #ff0000;
    text-align: center;
    width: 100%;
    height:auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 5% 0;
}

Codepen

https://codepen.io/ahmedi/pen/KvVgQW

左对齐画廊的最后一行

Left-align last gallery row

css

jquery

gallery

alignment