如何使列具有相同的高度，而不考虑内容，并在这些列中垂直对齐按钮？ [英] How to make columns the same height, regardless of content, and vertically-align buttons within those columns?

问题描述

我试图做一个列布局，内容在每个，我希望他们是相同的高度，但我不能让它工作。

I'm trying to make a column layout, with content in each, and I want them to be the same height but I'm not able to get it to work.

其中一个列高于其他列，它伸展整行，
，但不伸展其他列，也垂直居中的内容。
height 100％on span4没有帮助。

One of the columns is higher than the others, and it stretches the whole row, but not the other columns, also vertically centering content. height 100% on span4 didn't help.

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

简化的Css：

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

现有：

需要：

推荐答案

如果你想完美的重建那个布局，可以这样做。

If you want to perfectly recreate that layout, Flexbox can do that.

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

<div class="row">
    <div class="block">
        <h3>Header 1</h3>
        <p>Lorem ipsum...</p>
        <div><a class="btn btn-success" href="#">Some Button</a></div>
    </div>

    <div class="block">
        <h3>Header 1</h3>

        <p>Lorem ipsum dolor...</p>

        <div><a class="btn btn-success" href="#">Some Button</a></div>
    </div>

    <div class="block">
        <h3>Header 1</h3>

        <p>Mauris sed ligula...</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

This works in Firefox, Safari, Chrome, Opera, and IE10. If you need wider support than that, using display: table/table-row/table-cell is your next best bet. http://caniuse.com/#feat=flexbox

这篇关于如何使列具有相同的高度，而不考虑内容，并在这些列中垂直对齐按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！