1

私は使用display: tableしdisplay: cellていて、同じ高さの3列のレイアウトを持っています。

これが私のコードです、

HTML：

<div id='wrapper'>
 <aside class='column'>Left sidebar</aside>
 <div id='main' class='column'>
     <textarea rows="2"></textarea><br>Main content <br>
     <br><br><br>
 </div>
 <aside class='column'>Right sidebar</aside>
</div>

CSS：

#wrapper {
    display: table;
}
aside {
    background-color:#EEE;
    margin:0;
    padding: 0;
}
.column {
    display: table-cell; 
}

JS

$('textarea').focus(function () {
    $(this).attr('rows',8);
});

これがデモです

今、

に注目するとtextarea、高さがtextarea高くなり、高さもdiv#main高くなります。padding-topこれにより、両方にが追加されasideます。

display:tableその背後にdisplay:cellある理由かどうかはわかりませんが、問題を理解することはできません。

4

1 に答える 1

6

この質問を書いている間、私は問題を理解したので、他の人を助けるためにそれを共有しました。

デフォルトでは、のhtml要素にdisplay: cellは。がありvertical-align: middleます。

heightしたがって、 1つのセルが増加するたびに、他のセルのコンテンツは。のためにシフトしvertical-align:middleます。（これはパディングトップではなく、セルの中央での垂直方向の配置でした）

したがって、問題を修正するには、

これをCSSに追加しました。

.column {
    display: table-cell; 
    vertical-align: top;
}
于 2013-01-10T14:16:14.243 に答える