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

是的，使用浮动元素。通过向左浮动元素，当它们到达右边缘时，它们将突破到下一行。使用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

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

3 个答案: