Question

基本上我有一行有3列，列有图像和文字。

在chrome，Android，Fire-Fox中，我设法让每一列都是父级的高度，然后如果任何其他列更大，则将文本放在中间。但是在使用iOS 8.3和9.3.5的iPad中，不会使列高达100％的高度。

codepen是：https://codepen.io/rocketraccoon/pen/PEopPO

在这里，我留下了片段：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

您提供的任何帮助都会有所帮助。

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 现在已经太晚了，我在沙发上写字，所以我没有在iPad上测试，但我相当确定它有效。

编辑2 ：我刚刚意识到要求的内容，对问题的初步描述不是很清楚。这是一个新的codepen，其中包含所要求的内容：

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

iPad有弹性 - 高度

1 个答案: