Как выстроить div-ы в ряд?

144

13 ноября 2018, 04:40

Есть набор из 6 блоков. Задача стоит в том, чтобы выстроить три первых в первой колонке, а оставшиеся три - во второй колонке?

      .container{ 
                        background: #333; 
                         
                    } 
                    .container .first-block { 
                        background: yellow; 
                        width: 50%; 
                        height: 50%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
                    .container .second-block { 
                        background: green; 
                        width: 50%; 
                        height: 50%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
                    .container .third-block { 
                        background: purple; 
                        width: 50%; 
                        height: 50%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
                    .container .fourth-block { 
                        background: blue; 
                        width: 50%; 
                        height: 50%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
                    .container .fifth-block { 
                        background: black; 
                        width: 50%; 
                        height: 50%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
 
                     .container .six-block { 
                        background: red; 
                        width: 50%; 
                        height: 50%; 
                        padding: 5px; 
                        margin: 5px; 
                    } 
 
 
                    .clear { 
	                    clear: both; 
                    } 
 
                    .container .first-column { 
                        width: 70%; 
                    } 
 
                    .container .second-column { 
                        width: 30%; 
                    }

 <div class="container"> 
 
            <div class="first-column"> 
 
                <div class="first-block">1</div> 
                <div class="second-block">2</div> 
                <div class="third-block">3</div> 
 
            </div> 
    
            <div class="second-column"> 
 
                <div class="fourth-block">4</div> 
                <div class="fifth-block">5</div> 
                <div class="six-block">6</div> 
                <div class="clear"></div> 
 
            </div> 
 
        </div>

При "сжимании" браузера нужно применить адаптивную вёрстку, так, чтобы все блоки были друг по другом, в одну колонку.

Как это сделать?

Answer 1

      .container{ 
                        background: #333; 
                         
                    } 
                    .container .first-block { 
                        background: yellow; 
                        width: 45%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
                    .container .second-block { 
                        background: green; 
                        width: 45%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
                    .container .third-block { 
                        background: purple; 
                        width: 45%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
                    .container .fourth-block { 
                        background: blue; 
                        width: 40%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
                    .container .fifth-block { 
                        background: black; 
                        width: 40%; 
                        padding: 5px; 
                        margin: 5px; 
                        min-height: 150px; 
                    } 
 
                     .container .six-block { 
                        background: red; 
                        width: 40%; 
                        padding: 5px; 
                        margin: 5px; 
                    } 
 
 
                    .clear { 
	                    clear: both; 
                    } 
 
                    .container .first-column { 
                        width: 70%; 
 
                        float:left; 
                    } 
 
                    .container .second-column { 
                        width: 30%; 
 
                        float:left; 
                    }

 <div class="container"> 
 
            <div class="first-column"> 
 
                <div class="first-block">1</div> 
                <div class="second-block">2</div> 
                <div class="third-block">3</div> 
 
            </div> 
    
            <div class="second-column"> 
 
                <div class="fourth-block">4</div> 
                <div class="fifth-block">5</div> 
                <div class="six-block">6</div> 
                <div class="clear"></div> 
 
            </div> 
 
        </div>

В одну колонку - установить min-width или использовать @media