col-sm-4高度自举

时间:2015-05-25 13:06:44

标签: html5 twitter-bootstrap css3

我正在使用bootstrap来显示一组sm-4 div。其中每个都包括一个面板,该标题包含一个图像。这些图像的大小可变,但是,我想让这些列共享相同的高度。有可能吗?

到目前为止,这是html

<div class="row">
                            <a href="/app_dev.php/fly/50" class="fly_a">
      <div class="col-sm-4 flycard">
        <div class="panel panel-default unpan">
          <div class="panel-body planepi">
                  <img src="/Planes/AAT3.jpg" class="img_responsive" width="100%">

          </div>
          <div class="panel-footer">
          <h4>Falaise - Dieppe</h4>

              <p>3 places</p>
          </div>
        </div>
      </div>
      </a>
                                  <a href="/app_dev.php/fly/48" class="fly_a">
      <div class="col-sm-4 flycard">
        <div class="panel panel-default unpan">
          <div class="panel-body planepi">
                  <img src="/Planes/BE36.jpg" class="img_responsive" width="100%">

          </div>
          <div class="panel-footer">
          <h4>Bordeaux - Toulouse</h4>

              <p>1 place</p>
          </div>
        </div>
      </div>
      </a>
                                  <a href="/app_dev.php/fly/46" class="fly_a">
      <div class="col-sm-4 flycard">
        <div class="panel panel-default unpan">
          <div class="panel-body planepi">
                  <img src="/Planes/DA20.jpg" class="img_responsive" width="100%">

          </div>
          <div class="panel-footer">
          <h4>Flers - Pontoise</h4>

              <p>1 place</p>
          </div>
        </div>
      </div>
      </a>
    </div>

这是CSS(这是我到目前为止尝试过的)

.flycard
{
text-align:                     left;
}
// EDIT : ADD THIS TO SOLVE THE PROBLEM
.planepi
{
    max-height:                     200px;
    min-height:                     200px;
    overflow: hidden;
    height:                         100%;
    width:                          100%;
}

.planepi img
{
    max-width:100%;
    max-height:100%;
}

而且,结果是Plane pictures should be the same height, even if it has to overflow a bit

2 个答案:

答案 0 :(得分:1)

CSS单位

CSS有几个不同的单位来表示长度。

许多CSS属性采用“长度”值,例如宽度,边距,填充,字体大小,边框宽度等。 长度是一个数字,后跟长度单位,例如10px,2em等。

数字和单位之间不能出现空格。但是,如果值为0,则可以省略某些CSS属性的单位,允许负长度 有两种类型的长度单位:相对和绝对。

w3schools css units

.planepi {
  min-height: 30vh;
  height: 30vh;
  max-height: 30vh;
  overflow: hidden;
}

vh 相对于视口高度的1%

答案 1 :(得分:0)

对于有相同问题的任何人,您需要指定保存图像的div的最大高度:

.planepi {
  max-height: 200px; //this is the max height you want
  overflow: hidden; //everything that goes bellow 200px will be hidden
}

当然,您可以更轻松地将图像准备到相同的高度,但这样可以。