テーブルなしでこの種のHTMLレイアウトを行うことは可能ですか？

Question

私は、右のテキストのブロックに対応する左の画像で2列のレイアウトをしたいと思います。私は各列の間のマージンが最も高い項目の間にあることを望みます。そして、短い項目をその行の他の項目に垂直方向の中心にしたいと思います。

これは可能ですか？テーブルを使用するのはかなり簡単ですが、非構造化コンテンツにはクリーンマークアップを使用したいと考えていますが、それは実際にという表形式のデータではありませんです。私はもう一つの意味論的な方法がなければテーブルを使って受け入れます。

Answer 1

（あなたはIE7のサポートを必要としない場合）あなたが完全にdisplay:table-rowとdisplay:table-cellでこれを達成できます。

http://jsfiddle.net/ptriek/kMczt/

あなたはまた、通常のフロートとそれを達成することができたが、その後、あなたができなくなります垂直に画像を中心...

Answer 2

ここで基本的なレイアウトだ...私はdivタグで画像とテキストブロックを偽造していますが、一般的なアイデアを得るでしょう....

FIDDLE

Answer 3

あなたの写真は私のテーブルのようです。 テーブルを使うことには何も問題はありませんが、あなたではなく、テーブルタグを使用していないならば、あなたは何ができる：

<div class="table"> 
     <div class="tr" name="row1"> 
      <div class="td"> 
       <img src="pic1.jpg" alt="alt_text"> 
      </div> 
      <div class="td"> 
       Row 1 Text 
      </div> 
     </div> 
     <div class="tr" name="row2"> 
      <div class="td"> 
       <img src="pic2.jpg" alt="alt_text"> 
      </div> 
      <div class="td"> 
       Row 1 Text 
      </div> 
     </div> 
     <div class="tr" name="row3"> 
      <div class="td"> 
       <img src="pic3.jpg" alt="alt_text"> 
      </div> 
      <div class="td"> 
       Row 1 Text 
      </div> 
     </div> 
    </div> 

は、あなたが出て行間隔のためのCSSを使用することができ、各行の高さは、背の高いに等しくなります2つのコンテンツ列の私はCSSのウィザードだありませんが、多分このようなものは動作します：

div.tr{ 
    height:auto; 
    margin-bottom:20px; 
} 

tr.td{ 
    height:100%; 
    vertical-align: middle; 
} 

このようなものの大部分は、テーブルによって自動的に行われます。それでも、レイアウトを「テーブル」にしたくない場合があります。