css - 使用 CSS 创建一个动态重新排序的图标网格？

Question

注意：脚本不是我的选择

我正在向客户发送电子邮件，在电子邮件底部带有一组 12 个 100X100 图标（100% 宽度，均匀间隔）：

X X X X X X
X X X X X X

如果他们在较小宽度的设备上打开电子邮件，则应重新排序：

x x x x 
x x x x
x x x x

和

X X X 
X X X 
X X X
X X X

ETC

这在 CSS 中可能吗？

Answer 1

是的，使用浮动元素。通过向左浮动元素，当它们到达右边缘时，它们将中断到下一行。使用一个div元素作为容器，因为它默认具有宽度auto，它使用所有可用的宽度。例子：

HTML：

<div class="Container">
  <div class="item">X</div>
  <div class="item">X</div>
  <div class="item">X</div>
  <div class="item">X</div>
  <div class="item">X</div>
</div>

CSS：

.Container { overflow: hidden; }
.Container .item { float: left; width: 100px; height: 100px; }

在容器上设置overflow样式而不指定任何宽度或高度，将使子元素留在容器内。没有它，子元素不会影响容器的高度，因此它的高度会为零。

Answer 2

使用display:inline-block;.

您的 div 将是块元素，但您将能够像任何其他内联元素一样操作它们。您甚至可以证明它们填充容器的输入宽度。

例子

jsFiddle

Answer 3

如果您只使用一个 div 和一堆锚图像标签，那么只需设置max-width属性。

HTML：

<div class="icons">
    <a href="#"><img src="image1.png" /></a>
    <a href="#"><img src="image2.png" /></a>
    <a href="#"><img src="image3.png" /></a>
    <a href="#"><img src="image4.png" /></a>
    <a href="#"><img src="image5.png" /></a>
    <a href="#"><img src="image6.png" /></a>
    <a href="#"><img src="image7.png" /></a>
    <a href="#"><img src="image8.png" /></a>
    <a href="#"><img src="image9.png" /></a>
    <a href="#"><img src="image10.png" /></a>
    <a href="#"><img src="image11.png" /></a>
    <a href="#"><img src="image12.png" /></a>
</div>

CSS：

.icons {
    max-width: 600px;
}

演示：

jsFiddle