引导列中的高度标题相同

Question

我有像这样的html(bootstrap css):

<div class="container">
  <div class="row">
    <div class="col-xs-6 col">   
      <div class="block">    
        <div class="title">
          <strong>Dynamic title 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
       </div> 
    </div>
    <div class="col-xs-6 col">   
      <div class="block">
        <div class="title">
          <strong>Dynamic title <br>more than 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
       </div>
    </div>
  </div>
</div>

和css这样

.block{
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

.title{
  margin-bottom: 10px;
  min-height: 40px;
}

标题以动态文本形式出现,因此可以是1,2或3行.有没有办法使title高度与"最高"标题中的高度相同css only.无论来自api的标题文本如何,我都希望对齐属性.我想上面的例子没有设置就可以工作,min-height: 40px;因为我不知道min-height应该是什么.

http://jsfiddle.net/DTcHh/28125/

Answer 1

据我所知，这在 css 中是不可能的，因为这两个元素不是彼此的兄弟元素。如果是这样的话display: table-cell可能是一个选择。

但是，在使用时有一个解决方案，jQuery您可以查找最高.title元素并设置所有其他元素.title元素设置为该高度。

请参阅以下片段：

var largest = 0;
//loop through all title elements
$(document).find(".title").each(function(){
  var findHeight = $(this).height();
  if(findHeight > largest){
    largest = findHeight;
  }  
});

$(document).find(".title").css({"height":largest+"px"});

请参阅小提琴示例：http://jsfiddle.net/DTcHh/28131/