html - 尝试在 zurb foundation 中垂直对齐两列

Question

我将 Zurb Foundation 与 Sass Compass 一起使用，但这对于 css 中的任何内容来说都是一个问题。

所以，我有这样的代码

<div class="row">
    <div class="small-6 column">...</div>
    <div class="small-6 column">...</div>
</div>

列的内容高度不同，这取决于我想在其中放置多少文本和图像。该行没有明确的高度，由最高列的高度决定。现在最高的列将按原样显示，但另一列较短，我希望它的内容垂直居中。我四处寻找这个，并尝试使用 display: table 和相对定位，但它们都不能提供我需要的东西。

Answer 1

将垂直对齐的文本包裹在与其父级高度相同的 div 中并显示:表格单元格(在将其父级显示为表格之后):

HTML

    <div class="row">
        <div class="small-6 column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et iaculis justo. Mauris bibendum convallis est, vel blandit quam tempor aliquet. Cras euismod nibh et nisl congue, eget tincidunt mauris consectetur. Donec eu risus lectus. Integer at ipsum sed turpis fringilla adipiscing vitae vel enim.</div>
        <div class="small-6 column"><div class="v_align">Some text</div></div>
        <div class="clear"></div>
    </div>
<div style="width:200px; height:100px; background:#0f0; color:#fff;">dfbvd bdfhgf hfg hghf gfdh hfgghfd hgf</div>

CSS

.row{
    width:300px;
    height:auto;    
}
.clear{clear:both;}

.column:first-child{
    color:#f00;
    background:#ccc;
}
.column:nth-child(2){
    background:#999;
    color:#00f;
    display:table;
}
.column{
    width:150px;
    float:left;
}
.v_align{
    display:table-cell;
    vertical-align:middle;
}

JS

$(document).ready(function(){
    var rowHeight = $(".row").height();
    console.log(rowHeight);
    $(".column").height(rowHeight);
    $(".v_align").height(rowHeight);
});

查看结果:http://jsfiddle.net/gespinha/h6aPf/6/