2017-12-12 37 views
0

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

크롬에서 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>

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

+0

내가 알고 사용 분 높이가있을 때 IE가 정렬-항목에 문제가 있다는 : 여기에 요구되는 것과 새로운 codepen이다 https://caniuse.com/# search = align-items 아마 여기에서도? – MrBuggy

+0

@MrBuggy 사파리는 '최소 높이'를 지원하지 않는 것처럼 보입니다. 그러나 그 때문에 '높이'속성도 포함 시켰습니다. Safari를 제외한 모든 장치가 정상적으로 작동합니다 (IE는 아직 테스트하지 않았습니다). – Cheshire

+0

최소 높이를 제거하면 어떻게됩니까? – MrBuggy

답변

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

iPad screenshot

+0

앵커 내부의 div에 대한 제안에 감사드립니다. 또한 테이블 레이아웃을 사용하는 것에 대해 제안 해 주신 데 대해 감사드립니다. 그러나 코드를 사용하면 실제 코드 (이미지가 항상 맨 위이고 텍스트가 항상 중앙에 위치 함)와 마찬가지로 수행해야 할 작업이 수행되지 않습니다. – Cheshire

+0

@Cheshire는 스크린 샷에 대한 내 대답을 확인합니다. – scooterlord

+0

해결 방법이 될 수 있습니다. 귀하의 시간과 현명한 주셔서 감사합니다.) 나는 flex = ( – Cheshire