当前位置: 动力学知识库 > 问答 > 编程问答 >

html - responsive grid, 3 columns with multiple lines

问题描述:

I am currently using the following code to display a grid of images.

The problem is that when you gradually reduce the width of the browser, the grid will switch straight from 3 columns layout to 1 column layout.

How can i make it so the grid also switch to 2 columns layout before going to the 1 column layout, for middle sized tablets screens and such ?

Live demo: https://www.ni-dieu-ni-maitre.com/test2.php

<style>

/* SECTIONS */

.section {

clear: both;

padding: 0px;

margin: 0px;

}

/* COLUMN SETUP */

.col {

display: block;

float:left;

margin: 1% 0 1% 0%;

}

.col:first-child { margin-left: 0; }

/* GROUPING */

.group:before,

.group:after { content:""; display:table; }

.group:after { clear:both;}

.group { zoom:1; /* For IE 6/7 */ }

/* GRID OF THREE */

.span_3_of_3 { width: 100%; }

.span_2_of_3 { width: 66.66%; }

.span_1_of_3 { width: 33.33%; }

/* GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {

.col { margin: 1% 0 1% 0%; }

.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }

}

</style>

<div class="section group">

<div class="col span_1_of_3" style=\"min-width:200px\">

.........................................

</div>

<div class="col span_1_of_3" style=\"min-width:200px\">

.........................................

</div>

<div class="col span_1_of_3" style=\"min-width:200px\">

.........................................

</div>

<div class="col span_1_of_3" style=\"min-width:200px\">

.........................................

</div>

<div class="col span_1_of_3" style=\"min-width:200px\">

.........................................

</div>

<div class="col span_1_of_3" style=\"min-width:200px\">

.........................................

</div>

</div>

网友答案:

You need to add another breakpoint for tablet view. e.g.

@media only screen 
  and (min-device-width: 480px) 
  and (max-device-width: 1024px) {
    .span_3_of_3, 
    .span_2_of_3, 
    .span_1_of_3 { 
       width: 50%; 
    }
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: