Question

我经常遇到一个问题，需要很长时间才能解决。我希望底部的自举箱具有相同的高度。我试图在我的CSS中设置px中的高度，但这会让一切都变得混乱。我也尝试用％设置它，但这不起作用。那么如何设置高度的方式，所以所有的盒子都是相同的高度，如果我添加一些文字，那么盒子会改变高度吗？

Portfolio

HTML （刚刚在这里插入1个col，所以代码不能填充这么多）

＆＃13;

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
 .panel-pricing {
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
h3.panel-pricing {
  color: #999;
  font-size: 20px;
}
.panel-pricing .panel-heading {
  padding: 20px 10px;
}
.panel-pricing .panel-heading .fa {
  margin-top: 10px;
  font-size: 58px;
}
.panel-pricing .list-group-item {
  color: #777777;
  border-bottom: 1px solid rgba(250, 250, 250, 0.5);
}
.panel-pricing .list-group-item:last-child {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.panel-pricing .list-group-item:first-child {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
}
.panel-pricing .panel-body {
  background-color: #f0f0f0;
  font-size: 40px;
  color: #777777;
  padding: 20px;
  margin: 0px;
}

＆＃13;

<section id="plans">
  <div class="container">
    <div class="row">

      <!-- item -->
      <div class="col-md-4 text-center">
        <div class="panel panel-danger panel-pricing">
          <div class="panel-heading">
            <i class="fa fa-money" aria-hidden="true"></i>
            <h3>Plan 1</h3>
          </div>
          <div class="panel-body text-center">
            <p><strong>$100 / Month</strong>
            </p>
          </div>
          <ul class="list-group text-center">
            <li class="list-group-item"><i class="fa fa-check"></i> Personal use</li>
            <li class="list-group-item"><i class="fa fa-check"></i> Unlimited projects</li>
            <li class="list-group-item"><i class="fa fa-check"></i> 27/7 support</li>
          </ul>
          <div class="panel-footer">
            <a class="btn btn-lg btn-block btn-danger" href="#">BUY NOW!</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 1

更新css 并添加min-height

.panel-pricing .panel-body {
    background-color: #f0f0f0;
    font-size: 40px;
    color: #777777;
    padding: 20px;
    margin: 0px;
    min-height: 115px;
}

扩展时div上的高度相同

1 个答案: