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/