web-dev-qa-db-ja.com

画像をグリッドのような形式にするにはどうすればよいですか？

グリッドに並べたい画像が約12〜15個あり、各画像の下にテキストがあります。テーブルを使うことを考えましたが、最近はテーブルが一番いい方法ではないと聞いています。私は他のいくつかのことを試しましたが、私が望むように何もうまくいかなかったようです。

私がそれをどのように見せたいかの例は次のようになります：

[-----画像-----] [-----画像-----] [-----画像-----] [-----画像---- -] ---行1(--Description-)（-説明-）（-説明-）（-説明-）

[-----画像-----] [-----画像-----] [-----画像-----] [-----画像---- -] ---行2(--Description-)（-説明-）（-説明-）（-説明-）

等々...

テーブル以外に、使用を検討する必要がある他の方法は何ですか？任意の提案や参照が役立ちます。

htmlcssimagegrid
11
Peter

HTML：

 <div class = "floated_img"> 
 <img src = "img.jpg" alt = "一部の画像"> 
 <p>上記の画像の説明</ p> 
 </ div> 
 <div class = "floated_img"> 
 <img src = "img2.jpg" alt = "別の画像"> 
 <p >上の画像の説明</ p> 
 </ div>

CSS：

。floated_img 
 {
 float：left; 
}

あなたはおそらくもう少しスタイルが欲しいでしょう、しかしそれは基本的にあなたが望むことをするはずです。

9
crimson_penguin

フォーマットのようなグリッド？私にはテーブルのように聞こえます。実際にテーブルである何かにテーブルを使用している場合は、テーブルに問題はありません。

1
Eric Petroelje

グリッドと言ったので、それは高さと幅が固定されることを意味します。

インラインブロックは非常にうまく機能する可能性があります。フロートよりも少し扱いやすいと思います。また、インラインブロックは継承されたalignプロパティを尊重します（中央に配置することができます）

CSS

.grid_element {
  display: inline-block;
  width: 200px;
  height:200px;
  zoom: 1;         /* for IE */
  display*:inline; /* for IE */
}

ただし、インラインブロック要素は古いブラウザではうまく機能しない可能性があります。

いくつかの読書：
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
http://www.brunildo.org/test/InlineBlockLayout.html

0
The Who