1,2,3行のグリッドで応答する方法

次のコードでは、応答グリッドが1行から3行に変わり、1行を2行にしてから3行を表示したい場合大。それを行う最善の方法は何ですか？純粋なCSSで、ブートストラップではありません。ご協力いただきありがとうございます。1,2,3行のグリッドで応答する方法

<html> 
<head> 
<style> 
    /* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 1.6%; 
} 
.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.1%; 
} 
.span_1_of_3 { 
    width: 32.2%; 
} 

/* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 

@media only screen and (max-width: 300px) { 
    .col { margin: 1% 0 1% 0%;} 
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } 
} 
</style> 
    </head> 
<body> 


    <div class="section group"> 
    <div class="col span_1_of_3"> 
    This is column 1 
    </div> 
    <div class="col span_1_of_3"> 
    This is column 2 
    </div> 
    <div class="col span_1_of_3"> 
    This is column 3 
    </div> 
</div> 


</body> 
    </html>

出典

2017-12-24 G P

このスニペットでは、最初に使用していたfloatメソッドを使用して、少しクリーンアップしました。 Flexboxとインラインブロックは、レスポンシブコラムを実装する他の方法ですが、最善の方法はありません。それは状況によって異なります。

列に番号付きのクラスは必要ありません。私は5pxを使用したので、パディングとマージンの割合は難しいかもしれません。コンテナに負のマージンを設定すると、最初または最後の列のマージンを削除する必要はありません。：

一つの大きな問題は、しかし私はあなたがフレキシボックスで簡単にそれを行うことができます0

<html> <head> <style> .section { clear: both; padding: 0px; margin: -5px; font-size: 0; } .col { font-size: 16px; float: left; margin: 5px; width: calc(33.33% - 10px); } .group { width: 100%; } .group:after { clear: both; } .group { zoom: 1; /* For IE 6/7 */ } @media only screen and (max-width: 500px) { .col { width: calc(50% - 10px); } } @media only screen and (max-width: 300px) { .col { width: 100%; } } </style> </head> <body> <div class="section group"> <div class="col"> This is column 1 </div> <div class="col"> This is column 2 </div> <div class="col"> This is column 3 </div> </div> </body> </html>

出典

2017-12-24 07:49:29 JasonB

にフォントサイズという設定コンテナに空白スペースです

html, body {width:100%;margin:0} 
 

 
.group { 
 
    display: flex; /* displays children inline by default */ 
 
    flex-wrap: wrap; /* enables wrapping */ 
 
} 
 

 
.col {flex:1} /* each 33.33% of the parents width (3 columns) until the break at 768px happens */ 
 

 
.first {background:red} 
 
.second {background:green} 
 
.third {background:blue} 
 

 
@media screen and (max-width: 768px) { 
 
    .col {flex:0 1 50%} /* each 50% of the parents width (makes 2 columns) */ 
 
} 
 
/* if you want for the third column to take the remaining space, just change the first number to 1, which then enables growing/expanding of the flex-items */ 
 
@media screen and (max-width: 320px) { 
 
    .col {flex-basis:100%} /* each 100% of the parents width (makes 1 column) */ 
 
} 
 

 
/* The flex property is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. */

<div class="section group"> 
 
    <div class="col first"> 
 
    This is column 1 
 
    </div> 
 
    <div class="col second"> 
 
    This is column 2 
 
    </div> 
 
    <div class="col third"> 
 
    This is column 3 
 
    </div> 
 
</div>

列と言っているが、私が間違っている場合は私を修正し、私は自分の答えを修正するだろうと思う。

フレックスボックスの詳細については、をご覧ください。here

出典

2017-12-24 17:08:40 VXp

1,2,3行のグリッドで応答する方法

答えて

関連する問題