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，然后是先删除内联样式和优先处理移动样式的改进。

当您浮动项目时，您将希望所有项目都具有相同的高度，否则当它们开始新行时，如果它们更高，则它们可能“阻碍”在前一个元素上比其他人。如果没有足够的空间让浮动物品排成一排，它将向下移动到下一行并滑过。

.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

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

2 个答案: