引导列中的相同高度标题答案

【问题标题】：Same height title in bootstrap columns引导列中的相同高度标题
【发布时间】：2017-05-26 01:31:14
【问题描述】：

我有这样的 html（引导 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/

【问题讨论】：

如果您可以使用 jQuery:github.com/liabru/jquery-match-height，另一种解决方案是在特定高度上调整 block。

标签： html css twitter-bootstrap

【解决方案1】：

你可以使用表格来解决这个问题

.block{
    margin: 10px;
    padding: 10px;
    text-align: center;
}
td.block-cell {
  border: 1px solid #000;
}
.block-wrap {
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 10px;
}
.title{
  margin-bottom: 10px;
  min-height: 40px;
}

<!DOCTYPE html><head>
<title>Test</title><meta name='viewport' content='width=device-width,initial-scale=1.0,user-scalable=0'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</head>

<body>

<div class="container">
  <table class="block-wrap">
  <tr>
    <td class="block-cell">   
      <div class="block">    
        <div class="title">
          <strong>Dynamic title 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
       </div> 
    </td>
	
    <td class="block-cell" >   
      <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>
    </td>
	</tr>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>
</html>

【讨论】：

【解决方案2】：

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

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

参见下面的sn-p：

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/

【讨论】：

解决方案有一个小错误，因为它总是在最后使用变量“最大”。请在下面查看我的方法。

【解决方案3】：

您可以覆盖 CSS 引导程序，并使用 flexbox 使列具有相同的高度。

body {
    margin: 10px;
}
.same-height-wrapp {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.same-height-wrapp > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

.block{
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    text-align: center;
    height: 100%;
    position: relative;
}

.title{
  margin-bottom: 60px;
}
.desc-wrapp{
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 15px;
   
 }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

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

【讨论】：

它希望 prop1 在两个块中处于同一级别
@jonasnas 现在检查一下，它的工作，但假设 Prop1 和 Value1 总是有一行，如果会更多，代码需要定制

【解决方案4】：

使用当前的HTML，您无法使用 css 使两个块的高度相同。

但是，您可以使用 :before 或 :after 伪元素创建具有相同高度的假效果。

诀窍是在.container 上使用position: relative 并将其从子.col-xs-* 类中删除。然后使用 :before 或 :after 伪元素与明智地计算 left 和 width 值。

.same-height-container {
  position: relative;
}
.same-height-container .col {
  position: static;
}
.same-height-container .col:before {
  width: calc(50% - 30px - 20px); /* .container left-right padding +
                                     .block left-right margin */
  border: 1px solid black;
  background: green;
  position: absolute;
  content: '';
  left: 25px;  /* container left padding + block left margin */
  bottom: 10px;
  top: 10px;
  z-index: -1;
}
.same-height-container .col + .col:before {
  right: 25px;
  left: auto;
}

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  margin: 10px;
}

.block {
  margin: 10px;
  padding: 10px;
  text-align: center;
}

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

.same-height-container {
  position: relative;
}

.same-height-container .col {
  position: static;
}

.same-height-container .col:before {
  width: calc(50% - 50px);
  border: 1px solid black;
  background: green;
  position: absolute;
  content: '';
  left: 25px;
  bottom: 10px;
  top: 10px;
  z-index: -1;
}

.same-height-container .col + .col:before {
  right: 25px;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container same-height-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 Dynamic title <br>more than 1 lineDynamic title <br>more than 1 lineDynamic title <br>more than 1 line</strong>
        </div>
        <div>
          <i>Prop 1</i>
        </div>
        <div>
          Value 1
        </div>  
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

我稍微调整一下解决方案：

function sameheight(div){
    /* Latest compiled and minified JavaScript included as External Resource */

    var largest = 160;
    var findHeight = 0;

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

    $(document).find(div).css({"height":findHeight+"px"});
};

然后你就可以用这个函数了

sameheight(".blogtitle");

【讨论】：