html - 使用跨越多行的 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>