将 Div #2 和 Div #3 堆叠在 Div #1 旁边

Question

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

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

Answer 1

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

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

如果你避免列和行，你必须在写出来之前计算所有内容

<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;
}

和一个fiddle：http://jsfiddle.net/u03rs3mb/3/

将 Div #2 和 Div #3 堆叠在 Div #1 旁边

Stack Div #2 and Div #3 beside Div #1

html

css

flexbox