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 및 인라인 블록은 응답 형 열을 구현하는 다른 방법이지만 최선의 방법은 없습니다. 그것은 상황에 달려 있습니다.

열에 번호가 매겨진 클래스가 필요하지 않습니다. 패딩 및 마진 비율은 까다로울 수 있으므로 5 픽셀을 사용했습니다. 컨테이너에 음수 여백을 설정하면 처음 또는 마지막 열의 여백을 제거 할 필요가 없습니다.

하나의 큰 문제 비록 컨테이너에 빈 공간이 그래서 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

에 해당 글꼴 크기를 설정 당신은 인 flexbox 쉽게 그렇게 할 수 있습니다 :를

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 행의 격자로 반응하는 방법

답변

관련 문제