Div＃1旁边的Div 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

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

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

如果你避免列和行，你有你之前写出来

<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/