使用跨越多行的DIV列的頁面佈局

Question

我希望生成具有兩列的佈局，其中右列跨越兩行。我想這樣做，只是用DIV標籤：

+-----------+-----------+ 
+   +   + 
+   +   + 
+-----------+   + 
+   +   + 
+   +   + 
+-----------+-----------+ 

我曾嘗試：

<div> 
    <div style="float:left; width: 100px;"></div> 
    <div style="float:right width: 100px;"></div> 
    <div style="float:left; width: 100px;"></div> 
</div> 

但這沒有幫助。

Answer 1

您應該添加一個額外的包裝的第一列左右，所以您的標記看起來是這樣的：

<div> 
    <div style="float:left; width: 100px;"> 
      <div>1a</div> 
      <div>1b</div> 
    </div> 
    <div style="float:left; width: 100px;">2</div> 
</div> 

這應該使結果看起來是這樣：

+-----------+-----------+ 
|  1a |  2  | 
|   |   | 
+-----------+   | 
|  1b |   | 
|   |   | 
+-----------+-----------+ 

Answer 2

你可以用百分比來根據容器的大小允許您的佈局工作。

<div id="container" style="height:100%;width: 100%;"> 
    <div style="float: left;width: 50%;height: 100%;"> 
     <div style="height: 50%;"> 
      First left 
     </div> 
     <div style="height: 50%;"> 
      Second left 
     </div> 
    </div> 
    <div style="height: 100%;"> 
     First right 
    </div> 
</div>