CSS

Question

如何调整 CSS 以便下一个直接对齐在左侧下方而不是下一行下方？

我试过调整 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" 的文本分两行。您可以通过添加 class 来清除它来解决这个问题。例如：

<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;
}

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

CSS - Next row will not align underneath when 2 lines are present in the title

html

alignment

twitter-bootstrap