css - 使列高在行内均匀

如何在引导程序中控制列，以使它们保持相同的高度，并在其中保留不同的文本长度，从而使文本位于顶部？

我需要的示例：


到目前为止，这是标记：

<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>

最佳答案

您可以使用CSS3的flexbox模型来完成此任务：

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

http://jsfiddle.net/5vrutebn/

关于css - 使列高在行内均匀，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29784697/