Question

所以我有一个从数据库中获取的游戏网格。我希望每行元素都垂直对齐，其中大多数都是。但由于元素高度不同，其中一些元素最终会自行结束。有谁知道如何解决这个问题？

对于数据库中的每个游戏，我都在回应这段代码：

<div class="col-xs-4 col-height thumb">
    <a class="thumbnail">
        <img class="img-responsive" src="'.$imgPath.'" alt="hello" style="width:135px;height:200px">
        <span>'.$gameArr[$i][5].'</span>
        <br/>
        <strong>Genre: </strong><span>'.$gameArr[$i][3].'</span>
        <br/>
        <strong>Publisher: </strong><span>'.$gameArr[$i][2].'</span>
        <br/>
        <strong>Platform: </strong><span>'.$gameArr[$i][1].'</span>
        <br/>
        <strong>PEGI Rating: </strong><span>'.$gameArr[$i][4].'+</span>
        <br/>
        <strong>Price: </strong><span>£'.$gameArr[$i][6].'</span>
    </a>
</div>

Example of what I want

Example of problem

如果我不是很清楚，请原谅我，这是我的第一篇文章。我意识到我想解释的内容并不容易解释

Answer 1

答案来自：zessx

见ORIGINAL POST

这是由2行或更多行的技能引起的。使用float属性时，这是一个众所周知的错误。这是一个要理解的小图片：

enter image description here

<强> [Bootply] The issue

选项＃1：强制高度

您的第一个选择是强制元素具有相同的高度：

.tutor {
    height: 500px;
}

[专业]简单，随处可见
[Con]使用幻数
[Con]限制技能中的行数
[Con] modile version

<强> [Bootply] Force height

选项＃2：使用clearfix

您的第二个选择是使用clearfix，并强制第5个元素在新行上（对于第9个，第13个......）：

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}

[专业]不限制技能中的行数
[专业]没有无用的空白
[亲]没有神奇的数字
[Con]每个尺寸的一个CSS规则（xs/sm/md/lg）
[Con]规则取决于您的网格（.col-xx-3）

<强> [Bootply] Clearfix

Bootstrap网格垂直对齐

1 个答案:

选项＃1：强制高度

选项＃2：使用clearfix