html - CSS - 当标题中存在 2 行时，下一行将不会在下方对齐

Question

如何调整 CSS，使 next 直接对齐在左侧下方而不是下一行下方？

我已经尝试调整 margin-bottom 和 padding-bottom 以及 padding-top 但它没有正确对齐。

我知道问题出在标题文本“The Little Paris Shop”占用了两行，从而迫使下一张图片转到下一件商品。

看截图:('Radiant Angel'应该直接在'The Little Paris Shop'下)

截图

CSS

.for-sale-term a {
    font-size: 18px;
}
.for-sale-item2 {
    padding-top: 30px;
}
.col-xs-12.col-sm-6.col-md-3 {
    margin-bottom: 30px;
}

HTML

<div class="col-xs-12 col-sm-6 col-md-3 text-center">
<div class="for-sale-item2">
    <div class="for-sale-image"><img src="example.jpg">
    </div>
    <div class="for-sale-term"><a href="/little-paris-workshop">The Little Paris Bookshop</a>
    </div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-center">
<div class="for-sale-item2">
    <div class="for-sale-image"><img src="example.jpg"></div>
    <div class="for-sale-term"><a href="/speaking-bones">Speaking In Bones</a></div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-center">
<div class="for-sale-item2">
    <div class="for-sale-image"><img src="example.jpg"></div>
    <div class="for-sale-term"><a href="/country">Up Country</a>    </div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-center">
<div class="for-sale-item2">
    <div class="for-sale-image"><img src="example.jpg"></div>
    <div class="for-sale-term"><a href="/quest">The Quest</a></div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 text-center">
<div class="for-sale-item2">
<div class="for-sale-image"><img src="example.jpg"></div>
<div class="for-sale-term"><a href="/radiant-angel">Radiant Angel</a>  </div>
</div>

Answer 1

最后一行被前一行卡住了，因为“The Little Paris Bookshop”的文字分两行。您可以通过添加一个类来清除它来解决这个问题。例如:

<div class="col-xs-12 col-sm-6 col-md-3 text-center clearme">
<div class="for-sale-item2">
<div class="for-sale-image"><img src="/sites/default/files/example.jpg"></div>
<div class="for-sale-term"><a href="/radiant-angel">Radiant Angel</a>  </div>
</div>

.clearme {
    clear:both;
}