html - 3 个 DIV 的布局，其中 2 个在一列中

Question

我正在尝试做这样的事情:

|--------------------------------------------------------|-------------|
|                                                        |             |
|                    DIV 1                               |             |
|                                                        |    DIV 3    |
|--------------------------------------------------------|             |
|                    DIV 2                               |             |
|--------------------------------------------------------|-------------|

我不能为此使用表格。而且我不知道是否有办法让它们像那样堆叠？

我用下面的代码试过了，但是 DIV 3 并不是一直在顶部。它实际上正好比顶部低 div2.height。

#DIV_1 {
  height: 125px;
  width: 80%;
  display: block;
  float: left;
}
#DIV_2 {
  width: 80%;
  height: 15px;
  display: block;
}
#DIV_3 {
  display: block;
  float: left;
  height: 140px;
  width: 20%;
}

<div class="row" style="width: 1024px; height: 140px;">
  <div>
    <div id="DIV_1"></div>
    <div id="DIV_2"></div>
  </div>
  <div id="DIV_3">
  </div>
</div>

Answer 1

使用 CSS flexbox 布局相对简单:

.row {
    display: flex;                 /* establish flex container */
    height: 140px;                 /* height from original code */
    width: 1024px;                 /* width from original code */
}

.row > div:first-child {
    flex: 0 0 80%;                 /* width from original code */
    display: flex;
    flex-direction: column;        /* stack first div children vertically */
}

.row > div:first-child > div {
    flex: 1;                       /* items in first div distribute space equally */
    border: 1px dashed black; 
}

.row > div:last-child {
  flex: 0 0 20%;
  border: 1px dashed black;
}

<div class="row">
    <div>
        <div id="DIV_1">DIV #1</div>
        <div id="DIV_2">DIV #2</div>
    </div>
    <div id="DIV_3">DIV #3</div>
</div>

---

flexbox 的优势:

1. 最少的代码；非常有效率
2. centering, both vertically and horizontally, is simple and easy
3. equal height columns are simple and easy
4. multiple options for aligning flex elements
5. react 灵敏
6. 与 float 和表格不同，它们提供有限的布局能力，因为它们从未用于构建布局，而 flexbox 是一种具有广泛选项的现代 (CSS3) 技术。

---

浏览器支持:

所有主流浏览器都支持 Flexbox，except IE < 10 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加前缀，请使用 Autoprefixer .更多详细信息，请参阅 this answer .