如何将五乘三网格更改为三乘五？

Question

我有 15 张图片，我将它们显示在五列三行的网格中。使用媒体查询，我正在减小不同分辨率的大小，并希望以特定分辨率更改布局，因此每行三个而不是五个。

我正在使用宽度为 20% 的浮动分区来进行布局，但是当我将样式更改为 33% 时，前两行工作，然后在第三行，您只会在右侧看到一个图像，然后其他行按您的预期工作。

代码开头是这样的：

<div class="catalogue" style="display: inline-block;">
    <div class="catalogue-items">
        <img alt="Item1" src="/images/item1.png" style="width: 200px; height: 160px;" /></div>
    <div class="catalogue-items">
        <img alt="Item2" src="/images/item2.png" style="width: 204px; height: 160px;" /></div>
    <div class="catalogue-items">
        <img alt="Item3" src="/images/item3.png" style="width: 200px; height: 160px;" /></div>
    <div class="catalogue-items">
        <img alt="Item4" src="/images/item4.png" style="width: 199px; height: 160px;" /></div>
.
.
.
<div class="catalogue-items">
        <img alt="Item15" src="/images/item15.png" style="width: 199px; height: 160px;" /></div></div>

初始样式为：

.catalogue{
    width: 1200px; 
    margin: 0 auto;
    padding-top: 26px;
}
.catalogue-items{
    width: 20%;
    text-align: center; 
    float: left; 
    padding-bottom: 13px;
}

改变它们的样式是：

@media (max-width: 751px) {
   .catalogue{ width: 658px;}
   .catalogue-items { width: 33% !important;}
   .catalogue-items img{ width: 112px !important;}
}

如果我检查元素并删除图像上的一侧，它会正确显示，只是图像比我想要的大。如果我将该样式的大小更改为图像的大小，它将不起作用。

有谁知道我做错了什么？

Answer 1

在我的示例中，我稍微修改了您的代码。最重要的变化是min-height，其次是移除内联样式和优先考虑移动样式的改进。

当您浮动项目时，您会希望所有项目的高度相同，否则当它们开始新行时，如果前一个元素更高，它们可能会 "snag"比其他人。当浮动项目没有足够的空间容纳一行时，它会向下移动到下一行并滑过。

.catalogue {
  display: inline-block;
  margin: 0 auto;
  padding-top: 26px;
  width: 658px;
}
.catalogue-items {
  float: left; 
  padding-bottom: 13px;
  width: 33.33333%;
  min-height: 160px;
  text-align: center; 
}
.catalogue-items img {
  display: inline-block;
  max-width: 100%;
}

@media ( min-width: 752px ) {
  .catalogue {
      width: 1200px; 
  }
  .catalogue-items {
      width: 20%;
  }
}

<div class="catalogue">

    <div class="catalogue-items">
        <img alt="Item1" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item2" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item3" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item4" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item5" src="http://placehold.it/200x160px">
    </div>

    <!-- new row -->

    <div class="catalogue-items">
        <img alt="Item1" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item2" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item3" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item4" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item5" src="http://placehold.it/200x160px">
    </div>

    <!-- new row -->

    <div class="catalogue-items">
        <img alt="Item1" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item2" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item3" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item4" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item5" src="http://placehold.it/200x160px">
    </div>

    <!-- new row -->

    <div class="catalogue-items">
        <img alt="Item1" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item2" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item3" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item4" src="http://placehold.it/200x160px">
    </div>
    <div class="catalogue-items">
        <img alt="Item5" src="http://placehold.it/200x160px">
    </div>

</div>

演示JSFiddle.

Answer 2

也许您可以将 min-height 添加到 .catalogue-items