Question

我的网站上有六个图标。我希望其中三个在一行上而其他第二个仅在媒体屏幕为400px 时。所以我应该用@media screen and (max-width: 400px)来做。但我的主要问题是我不知道如何在第一行中使用3个图标并在第二行中使用下三个图标来进行换行。

＆＃13;

.icon {
  display: inline-block;
}
#line-break {}

＆＃13;

<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div id="line-break" class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>

＆＃13;

FIDDLE： https://jsfiddle.net/ayf8u5s9/

Answer 1

您可以在

中使用float和clear

@media screen and (max-width: 400px)

@media查询：

    .icon {
    display: inline-block;
    float: left;
    width: 24px;
    }
    
    .icon:nth-of-type(3n+1) {
    clear: left;
    }

<div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>
  <div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>
  <div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>
  <div id="line-break" class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>
  <div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>
  <div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>

Answer 2

您可以在第三个图标后插入<br>标记，并在视口宽度超过400px时隐藏media query：@media screen and (min-width: 400px)

Demo：

.icon {
  display: inline-block;
}
@media screen and (min-width: 400px) {
  br {
    display: none;
  }
}

<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<br>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>

Answer 3

使用display: inline-block排除float，而不是div。然后在媒体查询中，清除float上的line-break。

.icon {
  float: left
}
@media screen and (max-width: 400px) {
    #line-break {
      clear: left;
    }   
}

小提琴：https://jsfiddle.net/abhitalks/ayf8u5s9/2/

段：

＆＃13;

.icon {
    float: left
}

@media screen and (max-width: 680px) {
    #line-break {
        clear: left;
    }
}

＆＃13;

<div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div id="line-break" class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>

＆＃13;

Answer 4

尝试将每个3个图标放在一个div中然后制作这些div display: inline-block然后当媒体屏幕为400px时将其设为display: block

＆＃13;

.icon {
  display: inline-block;
}

.col1 {
  display: inline-block;
}

@media(max-width: 400px) {
  .col1 {
    display: block
  }
}

＆＃13;

<div class="col1">
  <div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>
  <div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>
  <div class="icon">
    <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
  </div>
</div>
<div class="col1">
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
<div class="icon">
  <img src="https://cdn4.iconfinder.com/data/icons/24x24-free-pixel-icons/24/Home.png" />
</div>
</div>

＆＃13;

Answer 5

.icon { width:auto; float:left }
.icon:nth-child(3n+1) { clear: both; }

如上修改样式。这将在每3次

后突破到下一行

Answer 6

将所有图标div放在一个主div中，然后在400px媒体屏幕中添加类宽度，只需3个图标，它会在下一行自动发送其他三个

用css拍摄3张图片后换行？

6 个答案: