引导程序列中的标题高度相同 [英] Same height title in bootstrap columns

问题描述

我有这样的html(bootstrap CSS):

I have html (bootstrap css) like this:

<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 height与仅使用 css 的最高"标题中的高度相同.我想使属性对齐，而不管来自api的标题文本如何.我希望上面的示例在不设置 min-height:40px; 的情况下工作，因为我不知道min-height应该是什么.

Title comes as dynamic text so it can be 1, 2, or 3 lines. Is there a way to make title height the same height as the height in the 'highest' title with css only. I want properties be aligned regardless of the title text coming in from api. I would like the above example to work without setting min-height: 40px; because I don't know what min-height should be.

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

推荐答案

据我所知，这仅在CSS中是不可能的，因为这两个元素不是彼此的兄弟.如果是这种情况，可能会选择 display:table-cell .

As far as I am aware this is impossible in css only since the two elements are not siblings of each other. If that was the case display: table-cell could have been an option.

但是，当使用 jQuery 时，有一种解决方案，您可以查找最高的 .title 元素并设置所有其他 .title 元素达到这个高度.

However there is a solution for this when using jQuery you can look up the highest .title element and set all the other .title elements to this heights.

请参阅以下代码段:

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/

See the fiddle for an example: http://jsfiddle.net/DTcHh/28131/

这篇关于引导程序列中的标题高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！