CSS - rowspanのような効果

Question

左の列に2つの結合された行があり、右の列には何もないという効果を達成したいだけです。このレイアウトはどのように達成できますか？

HTMLテーブルは次のようになります -

<table border="1" > 
    <tr> 
    <td rowspan="2">Div 1</td> 
    <td> Div 2 </td> 
    </tr> 
    <tr> 
    <td>Div3</td> 
    </tr> 
</table>​​​​​​ 

編集：私はこの使用して本部をacheiveたいです。私は各div要素にUserコントロールを配置します。 Div3がdiv2より下で開始し、Div1より下では開始しないことが重要です。

[申し訳ありませんが、これは最初の投稿ですので、画像を追加することはできません]

感謝。

Answer 1

CSS

body { 
     margin: 0; 
     padding: 50px; 
     background-color: #FFFFFF; 
     color: #000000; 
     font-family: Arial, Helvetica, sans-serif; 
    } 
    .tablewrapper { 
     position: relative; 
    } 
    .table { 
     display: table; 
    } 
    .row { 
     display: table-row; 
    } 
    .cell { 
     display: table-cell; 
     border: 1px solid red; 
     padding: 1em; 
    } 
    .cell.empty 
    { 
     border: none; 
     width: 100px; 
    } 
    .cell.rowspanned { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     width: 100px; 
    } 

<div class="tablewrapper"> 
     <div class="table"> 
     <div class="row"> 
      <div class="cell"> 
      Top left 
      </div> 
      <div class="rowspanned cell"> 
      Center 
      </div> 
      <div class="cell"> 
      Top right 
      </div> 
     </div> 
     <div class="row"> 
      <div class="cell"> 
      Bottom left 
      </div> 
      <div class="empty cell"></div> 
      <div class="cell"> 
      Bottom right 
      </div> 
     </div> 
     </div> 
    </div> 

デモ：http://www.sitepoint.com/rowspans-colspans-in-css-tables/