如何使列具有相同的高度，无论内容如何，​​以及这些列中的垂直对齐按钮？

Question

我正在尝试制作列布局，每个都有内容，我希望它们的高度相同，但我无法让它工作。

其中一列高于其他列，它延伸整行， 但不是其他列，也是垂直居中的内容。 span4上的高度100％没有帮助。

<div class="row">
    <div class="span4">
        <h3>Header 1</h3>
        <p>...</p>
        <div style="text-align: center">
            <a class="btn btn-success" href="">Some Button</a>
        </div>
    </div>
    <div class="span4">...</div>
    <div class="span4">...</div>
</div>

Simplified Css：

.row{width:100%;}
.span4{
    float:right;
    width:32%;
    margin-right:1%;
    border-radius:6px;
}

现有：

所需：

Answer 1

如果您想完美地重新创建该布局，Flexbox可以做到这一点。

http://codepen.io/cimmanon/pen/enurd

.row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* fix for Firefox */
  width: 100%;
}

.block {
  min-width: 30%;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 30%;
  -ms-flex: 1 30%;
  flex: 1 30%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.block h3 {
  margin-top: 0;
  margin-bottom: 1em;
}

.block div {
  text-align: center;
  margin-top: 1em;
}

/* pretty it up! */
body {
  background: #ccccff;
}

.block {
  background: white;
  margin: 0 .5em;
  padding: 1em;
  border: 1px solid;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
}

   <div class="row">
<div class="block">
    <h3>Header 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus.</p>
    <div><a class="btn btn-success" href="#">Some Button</a></div>
</div>
  
<div class="block">
    <h3>Header 1</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec. Vestibulum quam dolor, feugiat in posuere a, posuere imperdiet tellus. Mauris sed ligula vitae urna consequat aliquet. Curabitur pellentesque consectetur ornare. Pellentesque vel euismod odio. Nulla tempus pharetra nulla. In justo dolor, sollicitudin nec commodo sit amet, adipiscing eget lectus.</p>

    <div><a class="btn btn-success" href="#">Some Button</a></div>
</div>
  
<div class="block">
    <h3>Header 1</h3>

    <p>Mauris sed ligula vitae urna consequat aliquet. Curabitur pellentesque consectetur ornare. Pellentesque vel euismod odio. Nulla tempus pharetra nulla. In justo dolor, sollicitudin nec commodo sit amet, adipiscing eget lectus.</p>
    
    <div><a class="btn btn-success" href="#">Some Button</a></div>
</div>
</div>

适用于Firefox，Safari，Chrome，Opera和IE10。如果您需要更广泛的支持，使用display: table/table-row/table-cell是您的下一个最佳选择。 http://caniuse.com/#feat=flexbox

Answer 2

你可以做同等高度的柱技术：

.row {
    overflow:hidden;
}
.span4 {
    padding-bottom:32767px;
    margin-bottom:-32767px;
}

实现垂直居中的文本内容真的很棘手。我会尝试使用

.row {
    display:table;
}
.span4 {
    display:table-cell;
    vertical-align:middle;
}

但是你必须进一步调整它，我不确定它是否真的有用，哪些浏览器确实支持它。

Answer 3

就垂直对齐内容而言，请查看以下文章：

http://phrogz.net/css/vertical-align/

您将父容器设置为position：relative，然后将您的内容设置为position：absolute;最高：50％;身高：10em; margin-top：-5em;

基本上，上边距是 - 容器高度的1/2。