이온 성 2/3 반응성 격자 사각형

이온 성 2/3로 반응성있는 격자를 만드는 방법이 있습니까?이온 성 2/3 반응성 격자 사각형

은이 같은 시작일 :

<ion-grid> 
    <ion-row> 

     <ion-col col-6 *ngFor="let s of squares"> 

      <div style="text-align: center; padding: 10px; background-color: #888"> 
       1 
      </div> 

     </ion-col> 

    </ion-row> 
</ion-grid>

어떻게 고정 PX - 값을 사용하지 않고 동일 폭으로 각 컬럼의 높이를 설정할 수 있는가?

출처

2017-10-31 user1164016

https://www.thepolyglotdeveloper.com에 의해 이루어집니다를/2015/03/make-a-gallery-like-image-grid-using-ionic-framework/여기에서 논리를 이해할 수 있습니다. –

이 예제에서 사용 된 그림이 정사각형 인 것처럼 내 문제를 해결하지 못한다고 생각합니다. 그러나 나는 그림을 사용하고 싶지 않다 ... – user1164016

그래도 괜찮 으면 이미지를 사용하고 싶지 않다면 논리는 중요 할 것이다. –

당신은 순수 CSS에서 그것을 할 수 있습니다 :

div { 
 
    background:grey; 
 
    width:48%; 
 
    padding-top:48%; 
 
    float: left; 
 
    margin:1%; 
 
}

<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div>

트릭 1 비율 유지 : 1 padding-top:48%

출처

2017-10-31 20:38:55 Antikhippe

답변

관련 문제