html - 3 つの div - テーブルとして配置

Question

私は3つのdivを持っています:

<div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

.one {
    width: 100px;
    height: 200px;
    background-color: red;
}

.two {
    width: 100px;
    height: 100px;
    background-color: green;
    float: left;
}

.three {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
}

しかし、これはうまくいきません。受け取りを希望します:

<table>
    <tr><td rowspan="2" class="one"></td><td class="two"></td></tr>
    <tr><td class="three"></td></tr>
</table>

住む

TABLEと同じように、DIVでどのように作成できますか?

Answer 1

簡単な答えは、CSS を使用してテーブルとして表示することです。

次のスタイルを使用して、HTML を使用せずにテーブル レイアウトを実現できます。

display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;

Answer 2

これを実現するにはいくつかの方法があります。

1 つのオプションは、display:table-cellおよび関連するスタイルを使用して、正確にテーブルとして動作させることです。

もう 1 つは、そのまま使用する方法ですが、コンテナの をfloat定義し、必要に応じて配置するために使用します。widthclear

後者のオプションのフィドルは次のとおりです。http://jsfiddle.net/adnrw/7datp/4/組み込みのpaddingandmargintablecellspacingcellpadding

Answer 3

次のようなものを試してください：

.one,.two,.three{
  width:100px; float:left;
}
.one{
   height:200px; background-color:red;
 }
.two{
   height:100px; background-color:green;
}
.three{
  height:100px; background-color:blue; clear:left;
}

基本的に、clear:left;ただ.three。コンテナの高さを 3 秒すべて保持するには、浮動せずにコンテナにanddivを追加することをお勧めします。divclear:left;