3

私は Sass Compass で Zurb Foundation を使用していますが、これは css で問題になる可能性があります。

だから、私はこのようなコードを持っています

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

列には、そこに入れたいテキストと画像の量によって異なる高さのコンテンツがあります。行には明示的な高さがなく、最も高い列の高さによって決定されます。これで、最も高い列がそのまま表示されますが、もう一方の短い列は、コンテンツを垂直方向の中央に配置したいと思います。私はこれを調べて、display: table と相対位置を使用しようとしましたが、必要なものを提供するものはありません。

4

1 に答える 1

2

親と同じ高さの div で垂直方向に配置されたテキストをラップし、それを display:table-cell します (親をテーブルとして表示した後):

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/

于 2013-08-27T01:08:06.437 に答える