iPad 용 플렉스 - 높이

Question

기본적으로 나는 3 개의 열이있는 행을 가지고 있으며, 열은 이미지와 텍스트를 가지고 있습니다.

크롬에서 Android, Fire-Fox, 나는 각 열을 부모의 높이로 가져와 다른 열이 더 큰 경우 중간에 텍스트를 넣을 수있었습니다. 그러나 iOS 8.3 및 9.3.5가 적용된 iPad에서는 열이 높이의 100 %로 커지지 않습니다. https://codepen.io/rocketraccoon/pen/PEopPO

그리고 여기 내가 스 니펫을 떠나 :

codepen은 당신이 제공 할 수

body { 
 
    background-color: red !important; /* Only for trying to see the visual effect required */ 
 
} 
 

 
.triple-opcion { 
 
    padding: 40px; 
 
} 
 

 
.triple-opcion .opciones .opcion { 
 
    background-color: #FFFFFF; 
 
    text-align: center; 
 
    padding: 40px; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.triple-opcion .opciones .opcion:hover, 
 
.triple-opcion .opciones .opcion:focus, 
 
.triple-opcion .opciones .opcion:active { 
 
    text-decoration: none; 
 
} 
 

 
.triple-opcion .opciones .opcion .t5 { 
 
    text-transform: uppercase; 
 
    color: #191D22; 
 
    margin: auto; 
 
    max-width: 100%; 
 
} 
 

 
.triple-opcion .opciones .opcion img { 
 
    width: 64px; 
 
    margin-bottom: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="triple-opcion ayuda"> 
 
    <div class="row opciones opciones-ayuda"> 
 
    <div class="col-4"> 
 
     <a href="#> 
 
     <div class="opcion"> 
 
      <img src="http://via.placeholder.com/300" alt=""> 
 
      <p class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    <div class="col-4"> 
 
     <a href="#"> 
 
     <div class="opcion"> 
 
      <img src="http://via.placeholder.com/300" alt=""> 
 
      <p class="t5">24 months</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    <div class="col-4"> 
 
     <a href="#"> 
 
     <div class="opcion"> 
 
      <img src="http://via.placeholder.com/300" alt=""> 
 
      <p class="t5">48 months</p> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

어떤 도움이 도움이 될 것입니다.

Answer 1

다음은 table을 사용하는 해결책입니다. 또한 코드를 최적화 할 수있는 기회를 얻었습니다. 앵커 태그 안에 블록 요소 (예 : div)를 사용하면 안됩니다.

HTML :

<div class="triple-opcion ayuda"> 
    <div class="row opciones opciones-ayuda"> 
    <div class="col-12 col-md-4 opcion"> 
     <a class="inner"> 
     <img src="http://via.placeholder.com/300" alt="Buscador de números"> 
     <span class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500 
     </span> 
     </a> 
    </div>   
    <div class="col-12 col-md-4 opcion"> 
     <a class="inner"> 
     <img src="http://via.placeholder.com/300" alt="Preguntas frecuentes"> 
     <span class="t5">24 months</span> 
     </a> 
    </div>  
    <div class="col-12 col-md-4 opcion"> 
     <a class="inner">  
     <img src="http://via.placeholder.com/300" alt="Sugerencias"> 
     <span class="t5">48 months</span> 
     </a> 
    </div> 
    </div> 
</div> 

SCSS : 여기

body { 
    background-color: red; 
} 
.triple-opcion { 
    .opciones { 
    display:table; 
    table-layout:fixed; 
    width:100%; 
    border-spacing: 40px; 
    border-collapse: separate; 

    .opcion { 
     text-align: center; 
     padding: 40px; 
     display: table-cell; 
     height: 100%; 
     background:#fff; 
     vertical-align:middle; 

     span { 
     display:block; 
     } 

     &:hover, 
     &:focus, 
     &:active { 
     text-decoration: none; 
     } 
     img { 
     width: 64px; 
     } 
     .t5 { 
     text-align: center; 
     margin: auto; 
     max-width: 100%; 
     } 
    } 
    } 
} 

이 작업 펜 - 그리고 내 소파에서 쓰고 있어요 그래서 나는 내 아이 패드에서 테스트하지 않았다 그것은 너무 늦기 https://codepen.io/scooterlord/pen/NXWmQJ ,하지만 그것이 작동하는지 꽤 확신합니다.

편집 2 : 나는 방금 요청한 것을 깨달았습니다. 문제의 초기 설명은 분명하지 않았습니다.

https://codepen.io/scooterlord/pen/eymprK