如何安排3个div：div 1和2堆叠在左列，div 3是右列

Question

我有三个我喜欢这样安排的内容

我的代码应如下所示：

<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. 响应
6. 与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。

要了解有关flexbox的更多信息，请访问：

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

浏览器支持：

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

Answer 2

<style type="text/css">
.main{
    height:500px;
    width:400px;
}
div.subDiv{
    height:50%;
    margin:5px;
}
div.subDiv>div{
    width:47%;
    height:100%;
    display:inline-block;
}
div.subDiv>div>div{
    height: 122.5px;
    background-color:gray;
}
div.subDiv>div>div+div{
    margin-top:5px
}
.gray{
    background-color:gray;
}
</style>
<div class="main">
    <div class="subDiv">
        <div>
            <div></div>
            <div></div>
        </div>
        <div class="gray"></div>
    </div>
</div>

试试这个。

Answer 3

要达到预期效果，请使用以下选项

.container {
  height: 100px;
}

.div1 {
  float: left;
  postion: absolute;
  width: 20%;
  border: 1px solid black;
  height: 50%;
}

.div2 {
  float: left;
  clear: both;
  vertical-align: bottom;
  width: 20%;
  border: 1px solid black;
  height: 50%;
}

.div3 {
  display: inline-block;
  width: 20%;
  height: 100%;
  border: 1px solid black;
}

http://codepen.io/nagasai/pen/KMWgEz