html - 如何排列3个div : div 1 and 2 stacked in left column,和div 3是右列

Question

我有三个 div，我想这样排列

我的代码应该是这样的:

<div class="container">
    <div class="div1">Div #1</div>
    <div class="div2">Div #2</div>
    <div class="div3">Div #3</div>    
</div>

那么 - 如果可能的话，我的 css/html 应该是什么？

Answer 1

.container {
    display: flex;              /* establish flex container */
    flex-direction: column;     /* align children (flex items) vertically */
    flex-wrap: wrap;
    height: 120px;
}

.container > div {
    flex: 1 0 50px;            /* occupy free space, don't shrink, initial height */
    width: calc(50% - 10px);   /* half container size less margins */
    margin: 5px;
    box-sizing: border-box;
    border: 1px solid black;
}

<div class="container">
    <div class="div1">Div #1</div>
    <div class="div2">Div #2</div>
    <div class="div3">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 的更多信息，请访问:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS 技巧
• What the Flexbox?! ~ YouTube 视频教程

---

浏览器支持:

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