1

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

其中一列比其他列高，它延伸整行，但不是其他列，也垂直居中内容。span4 上的 height 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>

简化的CSS：

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

现存的： 现存的

期望： 期望的

4

3 回答 3

3

如果您想完美地重新创建该布局，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

于 2013-04-22T20:14:44.457 回答
0

你可以做等高列技术：

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

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

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

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

于 2013-04-22T19:22:09.583 回答
0

至于垂直对齐内容，请查看这篇文章：

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

您将父容器设置为位置：相对，然后将您的内容设置为位置：绝对；最高：50%；高度：10em；边距顶部：-5em；

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

于 2013-04-22T19:38:40.743 回答