Как сделать столбцы одинаковой высоты независимо от содержимого и вертикально выравнивать кнопки внутри этих столбцов?

Я пытаюсь создать макет столбца с содержимым в каждом, и я хочу, чтобы они были одинаковой высоты, но я не могу заставить его работать.

Один из столбцов выше других, и он растягивает всю строку, но не другие столбцы, а также вертикально центрирующее содержимое. высота 100% на span4 не помогла.

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

Существующий:

Желаемая:

Ответ 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;
}

<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

Ответ 2

Вы можете использовать метод столбцов с одинаковой высотой:

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

Для достижения вертикально центрированного текстового содержимого очень сложно. Я бы попытался использовать

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

но вам придется подстроить его дальше, и я не уверен, действительно ли это будет работать, и какие браузеры действительно поддерживают его.

Ответ 3

Что касается вертикального выравнивания содержимого, проверьте эту статью:

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

Вы устанавливаете родительский контейнер в позицию: relative, а затем ваш контент в позицию: absolute; верх: 50%; высота: 10м; margin-top: -5em;

в основном верхнее поле - 1/2 высоты контейнера.