代码之家 › 专栏 › 技术社区 › Zander

带伸缩高度的iPad

height flexbox ipad css ios

Zander · 技术社区 · 7 年前

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

在chrome、Android、Fire Fox中,我设法让每一列都达到父列的高度,然后如果其他列更大,我就把文本放在中间。但在iOS 8.3和9.3.5的iPad中,并没有使列在100%的高度上变大。

代码笔是: https://codepen.io/rocketraccoon/pen/PEopPO

在这里,我留下一个片段:

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>

你能提供的任何帮助都会很有帮助。

1 回复 | 直到 7 年前

scooterlord 7 年前

下面是一个使用 table . 我还借此机会优化了您的代码。您不应该使用块元素,例如 div s内部锚定标记。

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>

SCS:

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 :我刚刚意识到需要什么,对问题的最初描述不是很清楚。下面是一个新的代码笔,其中包含所请求的内容:

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