Question

对于这个项目，我正在学习和练习Bootstrap。我尝试在中等视口处设置3个图块来穿过屏幕，然后向上堆叠，然后堆叠在任何较小的区域。我在这些图块中有一个图标，标题和段落。每个图块的段落长度不同。当我调整浏览器大小时，一些容器不会碰到底部，底部有空的空间，因为容器段落可能只有2行而不是3行。

如何在没有在容器上设置固定高度或使用任何类型的省略号的情况下触摸底部？

codepen示例：http://codepen.io/MrAdam/pen/QKbJAR?editors=1100

HTML：

    <div class="tile tile1 col-md-4 text-xs-center">
        <i class="fa fa-book" aria-hidden="true"></i>
        <h2>Learn</h2>
        <p>Our smaller class sizes ensure you get quality personal time with instructors</p>
    </div>

    <div class="tile tile2 col-md-4 text-xs-center">
        <i class="fa fa-code" aria-hidden="true"></i>
        <h2>Code</h2>
      <p>Learn technologies such as HTML5, CSS3, JavaScript, Angular.js and Node.js.</p>
    </div>

    <div class="tile tile3 col-md-4 text-xs-center">
          <i class="fa fa-wrench" aria-hidden="true"></i>
          <h2>Create</h2>
          <p>Create projects that give you real world experience and you can put in your portfolio</p>
    </div>

  </div>
</div>


.tile {
  padding: 3rem;
  color: #F5EFED;
  text-align: justify;
}

CSS：

.tile i {
  font-size: 2.6rem;
  padding: 1rem;
  border-radius: 50%;
  border: 3px solid #F5EFED;
  margin: 1rem 0;
}

.tile1 {
  background: url(../img/tile1.jpg)
  center / cover 
  no-repeat;
}

.tile2 {
  background: url(../img/code.jpg)
  center / cover 
  no-repeat;
}

.tile3 {
  background: url(../img/create2.jpg)
  center bottom / cover
  no-repeat;
}

Answer 1

解决方案＃1： text-overflow: ellipsis;（其他款式规则：1）

.tile p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile {
  color: white;
  padding: 3rem;
  text-align: justify;
  height: 100%;
}

.tile i {
  font-size: 2.6rem;
  padding: 1rem;
  border-radius: 50%;
  border: 3px solid white;
  margin: 1rem 0;
}

.tile1 {
  background: #372549;
}

.tile2 {
  background: #774C60;
}

.tile3 {
  background: #B75D69;
}

<div class="program-steps container-fluid">
  <div class="program-steps-content row">

    <div class="tile tile1 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-book" aria-hidden="true"></i>
        <h2>Learn</h2>
        <p>Our smaller class sizes ensure you get quality personal time with instructors</p>
      </div>
    </div>

    <div class="tile tile2 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-code" aria-hidden="true"></i>
        <h2>Code</h2>
        <p>Learn technologies such as HTML5, CSS3, JavaScript, Angular.js and Node.js.</p>
      </div>
    </div>

    <div class="tile tile3 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-wrench" aria-hidden="true"></i>
        <h2>Create</h2>
        <p>Create projects that give you real world experience and you can put in your portfolio</p>
       </div>
    </div>
    
  </div>
</div>



<script src="https://use.fontawesome.com/c1b0f372e8.js"></script>

解决方案＃2： display: flex;（其他款式规则：2）

.program-steps-content.row {
    display: flex;
}

.program-steps-content.row .tile {
    flex: 1 1;
    height: auto;
}

.tile {
  color: white;
  padding: 3rem;
  text-align: justify;
  height: 100%;
}

.tile i {
  font-size: 2.6rem;
  padding: 1rem;
  border-radius: 50%;
  border: 3px solid white;
  margin: 1rem 0;
}

.tile1 {
  background: #372549;
}

.tile2 {
  background: #774C60;
}

.tile3 {
  background: #B75D69;
}

<div class="program-steps container-fluid">
  <div class="program-steps-content row">

    <div class="tile tile1 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-book" aria-hidden="true"></i>
        <h2>Learn</h2>
        <p>Our smaller class sizes ensure you get quality personal time with instructors</p>
      </div>
    </div>

    <div class="tile tile2 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-code" aria-hidden="true"></i>
        <h2>Code</h2>
        <p>Learn technologies such as HTML5, CSS3, JavaScript, Angular.js and Node.js.</p>
      </div>
    </div>

    <div class="tile tile3 col-md-4 text-xs-center">
      <div class="test">
        <i class="fa fa-wrench" aria-hidden="true"></i>
        <h2>Create</h2>
        <p>Create projects that give you real world experience and you can put in your portfolio</p>
       </div>
    </div>
    
  </div>
</div>



<script src="https://use.fontawesome.com/c1b0f372e8.js"></script>

注意：

对于移动设备分辨率，您需要为其添加新的弹性规则声明了规则display: flex的父元素崩溃元素，例如：flex-direction: column;
在生产中使用flex之前，请检查浏览器兼容性，并确保了解这些限制。遗产浏览器不支持它，或者可能只支持以前的版本在标准化之前的语法，所以你需要这样做一些彻底的跨浏览器测试和一些研究

https://css-tricks.com/using-flexbox/“使用Flexbox：混合旧版和新版以获得最佳浏览器支持”

如何在不同的视口大小下停止文本长度更改div高度

1 个答案: