html - 3张带有css的图像后换行？

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

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

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

fiddle : https://jsfiddle.net/ayf8u5s9/

最佳答案

您可以在第三个图标后插入 <br> 标签，并在视口(viewport)宽度超过 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>

关于html - 3张带有css的图像后换行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35060122/