Question

我目前正在使用以下代码显示图片网格。

问题在于，当您逐渐减小浏览器的宽度时，网格将从3列布局直接切换到1列布局。

我怎样才能使网格在转到1列布局之前切换到2列布局，对于中型平板电脑屏幕等？

现场演示：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>

Answer 1

您需要为平板电脑视图添加另一个断点。 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%; 
    }
}

响应式网格，3列多行

1 个答案: