Question

我无法在调整大小时保持图像网格不会掉到下一行。我尝试了很多不同的appraoches，包括使用DIV标签而不是跨度..我认为当文本丢弃一条线时。什么想法有什么不对？看看问题是什么的gif： imagejumpinggif

以下是片段：

CSS：

.house {
    width: 23%;
    padding: 0;
    margin: 0;
    text-align: center;
    float: left;
    display: block;
}
.house_container {
    @include span-columns(12);
    text-align: center;
    min-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
}
.house_illustration {
    width: 100%;
    padding: 3%;
}
li {
    list-style-type: none;
    text-decoration: none;
}
.label {
    display: block;
    text-align: center;
    overflow: scroll;
}

HTML：

<div class="house_container">
  <span class="house"><img src="img/house1.gif" class="house_illustration"/>
  <p class="label">0-2500 sq ft<br> $275 </p> </span>
  <span class="house"><img src="img/house1.gif" class="house_illustration"/>
  <p class="label">2501-3000 sq ft<br> $300 </p> </span>

等。

Answer 1

看起来第二排正在调整顶部行的第二个房子跨度。如果这是问题，这应该解决它：

.house:nth-child(4n+1){ clear:left; }

https://jsfiddle.net/17e5asgk/

图像网格迅速下降到下一行

1 个答案: