在Div＃1旁边堆叠Div＃2和Div＃3

Question

有人可以帮助我让我的div像这张图片一样堆叠吗？它必须在CSS中完成，因为我不能分成两个单独的列。我的代码应如下所示：

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

Answer 1

我能想到这样做的唯一方法是设置一些静态宽度和高度。您可以尝试下面的内容。

我个人不推荐这个，我建议使用表格或div并制作一些列/行。它将使布局更加流畅和动态。如果您需要添加更多元素，它会自动为您调整。

如果您避免使用列和行，则必须在写出之前计算所有内容

<div class='out'>
    <div class='in big'>one</div>
    <div class='in sm'>two</div>
    <div class='in sm'>three</div>
</div>

.in {
    float: left;
    background: tomato;
    border-right: 1px solid white;
    border-top: 1px solid white;
}
.out {
    width: 200px;
    height: 400px;
}
.big {
    width: 99px;
    height: 399px;
}
.sm {
    width: 99px;
    height: 199px;
}

和小提琴：http://jsfiddle.net/u03rs3mb/3/