Question

我这里有一个jsfiddle - http://jsfiddle.net/ktmzk3jk/

我想让积木上的红色背景高度相同。

我确信我可以用Jquery做到这一点但是有一个标准的CSS灵魂。

    <div class="container">

        <div class="row">

            <div class="col-sm-4 col"> 
                <div class="block">
                    <h3>65%</h3>
                    <p>Some Text Some Text</p>
                </div>
            </div>

            <div class="col-sm-4  col"> 
                <div class="block">
                    <h3>20%</h3>
                    <p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
                </div>
            </div>

            <div class="col-sm-4  col"> 
                <div class="block">
                    <h3>5%</h3>
                    <p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
                </div>
            </div>

        </div>

    </div>

Answer 1

尝试这样 DEMO

<强> CSS：

.row-full-height {
  height: 100%;
}
.col-full-height {
  height: 100%;
  vertical-align: middle;
}
.row-same-height {
  display: table;
  width: 100%;
  /* fix overflow */
  table-layout: fixed;
}
.col-xs-height {
  display: table-cell;
  float: none !important;
}

<强> HTML：

<div class="row">
    <div class="row-same-height row-full-height">

      <div class="col-sm-4 col-xs-height col-full-height">...</div>
</div>
</div>

Answer 2

你不应该设置内部<div class="block">的样式，事实上你甚至不应该在那里设置它;

直接设置.col选择器的样式，

here you have a fiddle

Answer 3

对于相同尺寸的红色块，您需要更新.block中的高度值，如果您知道最大高度，则将高度设置为height:150px而不是height:100%。否则还包括overflow:auto;，以便在文本超出边界时出现滚动更新了JS Fiddle：http://jsfiddle.net/ktmzk3jk/8/

Answer 4

添加min-height将是最好的方法，但我建议使用jQuery方法。特别是如果内容经常变化到不同的长度。

CSS相同的高度块

4 个答案: