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

等等

这在 CSS 中可行吗？

Answer 1

是的，使用 float 元素。通过向左浮动元素，它们将在到达右边缘时中断到下一行。使用 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 样式而不指定任何宽度或高度，将使子元素留在容器内。没有它，子元素不会影响容器的高度，因此它的高度将为零。