How to make columns the same height, regardless of

问题:

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.

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>

Simplified Css:

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

Existing:

Desired:

回答1:

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

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

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

回答2:

You could do equal height columns technique:

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

To achieve vertically centered text content is really tricky. I would try using

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

but you'll have to tweak it further and I'm not sure if it will really work out and which browsers do support it really.

回答3:

As far as vertically aligning the content,check this article out:

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

You set a parent container to position: relative, then your content to position:absolute; top: 50%; height: 10em; margin-top: -5em;

basically the top margin is - 1/2 the container height.