即使在一排之内也能使列高

Question

如何在引导程序中控制列，使它们保持相同的高度，内部文本长度不同，文本保持在顶部？

我需要的例子：

到目前为止这是标记：

<div class="row-same-height row-full-height">
<div class="col-xs-6 col-xs-height col-full-height warning"><div class="item"><div class="content "><h2>No cost, as long as you want the contents of the columns to be centered between the top and bottom</h2></div></div></div>
<div class="col-xs-3 col-xs-height col-full-height"><div class="item"><div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium facilisis volutpat. Pellentesque finibus diam nec commodo eleifend. Pellentesque varius felis ac metus vestibulum, id vestibulum mi congue. Vestibulum quis sem ultrices, pharetra est id, pretium neque. Maecenas pulvinar urna vel orci tincidunt, eu consequat magna efficitur. Maecenas commodo mi erat, id placerat ipsum dignissim at. Nunc sed laoreet lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer a sapien at dolor pulvinar pretium quis eget ligula.</div></div></div>
<div class="col-xs-2 col-xs-height col-full-height"><div class="item"><div class="content">Yes, really </div></div></div>
<div class="col-xs-1 col-xs-height col-full-height"><div class="item"><div class="content"></div></div></div>

</div>

Answer 1

你可以使用CSS3的flexbox模型来实现这个目标：

.row-same-height {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

http://jsfiddle.net/5vrutebn/

Answer 2

您需要使用javascript来完成此操作。

javascript搜索行中的最高元素。并相应地调整大小。

http://codepen.io/micahgodbolt/pen/FgqLc

/ *感谢CSS Tricks指出这一点jQuery http://css-tricks.com/equal-height-blocks-in-rows/ 它被修改为一个在页面加载时调用的函数，然后每次调整页面大小。一个大的修改是在每次新计算之前移除设定高度。 * /

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.main article');
});


$(window).resize(function(){
  equalheight('.main article');
});

Answer 3

通过这个例子，您可以了解自己想要做什么：

＆＃13;

＆＃13;

/*CSS*/
#contenedor {
  display: table;
  width: 100%
}
#contenidos {
  display: table-row;
}
#columna1 {
  display: table-cell;
  background: #ccc;
  width: 20%;
}
#columna2 {
  display: table-cell;
  background: #666;
  width: 50%;
}
#columna3 {
  display: table-cell;
  background: #999;
  width: 20%;
}

＆＃13;

<!--HTML-->
<div id="contenedor">
  <div id="contenidos">
    <div id="columna1">
    	<p>Texto</p>
    	<p>Texto</p>
    	<p>Texto</p>
    	<p>Texto</p>
    	<p>Texto</p>
    	<p>Texto</p>
    </div>
    <div id="columna2">Texto</div>
    <div id="columna3">Texto</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;