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

はい、フローティング要素を使用しています。要素を左にフローティングすることにより、要素が右端に到達したときに次の行にブレークします。要素はデフォルトで幅があり、使用可能なすべての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