Stack Div ​​# 2 и Div # 3 у Div # 1

Question

Может кто-нибудь помочь мне заставить мои divs складываться, как на этом изображении? Это нужно сделать в 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/