HTMLテーブルから列の傾向を削除します

Question

私は、ほぼ同じサイズの7つの画像を含むテーブルを設計しています。基本的には、列内にすべてを配置し、行に基づいてレイアウトするようなHTMLの傾向を変更する方法（別の方法では、各行を別の表に分割する方法）があるかどうか疑問に思っていました。

ここにはjsfiddleが記載されています。 （私は画像の代わりにLorem Ipsumを使用しました）上の行と下の行を中心にしたいと思います。

私はそれを3つのテーブルに分割し、それぞれにwidth:xxxpxとmargin: 0 autoを設定していましたが、そうしないと思います。

ご意見ありがとうございます - ありがとう！

Answer 1

ええ、この問題では複数の部門と一緒に行く方がよいかもしれません。

HTML：：

<div class="rows"> 
    <div class="top"> 
     <img></img> 
     <img></img> 
    </div> 
    <div class="middle"> 
     <img></img> 
     <img></img> 
     <img></img> 
    </div> 
    <div class="bottom"> 
     <img></img> 
     <img></img> 
    </div> 
<div> 

CSS：

.rows{ 
    margin:10px; 
} 

.top, .bottom{ 
    padding-left:85px; 
    padding-right:85px; 
} 

.top, .bottom, .middle 
{ 
    width:520px; 
} 

.rows img 
{ 
    margin: 10px; 
    width:150px; 
} 

基本的には、画像の通常の流れが自分の位置を制御でき、代わりに、マージンやパディングを使用して、次のような何かをすることが可能です間隔を均等にする。

Answer 2

vertical-alignプロパティを参照してください。

Answer 3

なぜ、1行に複数のセルを作成しても気にしませんか？同じセルの中で隣り合って並んでいるすべての画像を一列に並べます。