2

私は基本的なグリッドシステムを持っています。これは、「セル」を流動的な「行」に並べて配置する、本当に基本的なものです。2 つのセルの高さが常に一致するようにして、それらが等しくなるようにします。そのため、一方のコンテンツが他方よりも多い場合、もう一方はコンテンツの多いセルの高さに合わせて拡張されます。

<div class="row">
    <div class="cell1">
        <div class="inner">
            <h2>Cell 1</h2>
            <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
        </div>
    </div>
    <div class="cell2">
        <div class="inner">
            <h2>Cell 2</h2>
        </div>
    </div>
</div>

ここの問題のデモ: http://jsfiddle.net/QDBff/

4

7 に答える 7

5

絶対にTABLEの使用を避ける必要がある場合は、divをスタイルしてテーブルのように動作させることができます

display: table;
display: table-row;
display: table-cell;

マークアップ/css を見ると、次のフィドルが表示されます: http://jsfiddle.net/aeinbu/QDBff/35/

于 2013-05-16T10:57:34.547 に答える
2

jQueryを使用してここで機能させました：http://jsfiddle.net/QDBff/10/

$(document).ready(function() {
    var height1 = $('.cell1 > .inner').height();
    var height2 = $('.cell2 > .inner').height();
    if (height1 < height2) {
        $('.cell1 > .inner').height(height2);
    } else {
        $('.cell2 > .inner').height(height1);
    }
});
于 2013-05-16T10:30:52.023 に答える
1

<table><tr><td>Cel 1</td><td>Cel 2</td></tr></table>

于 2013-05-16T10:30:21.897 に答える
0

大きなパディングの下部と等しい負のマージンの下部をセルに追加overflow: hiddenし、行に貼り付けます。

.cell {
    width: 50%;
    background: #eee;
    float: left;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

.cell:nth-child(odd) { background: #ddd; }

.row { overflow: hidden; }

.row:after {
    content: "";
    clear: both;
    display: table;
}

例:

http://jsfiddle.net/Q9U6g/1/

于 2013-05-16T10:57:21.150 に答える
0

私はあなたのフィドルをチェックしました.270pxの最小高さを追加することで修正できると思います（例のみ）。

私は jsfiddle ユーザーではありませんが、以下のスクリーンショットを見てください...

ここに画像の説明を入力

ノート：

ニーズに合わせて最小高さを微調整するだけです。テキストのサイズが増減するたびに微調整が必​​要です。

ただし、コンテンツが動的である場合、これは恒久的な解決策ではありません。

于 2013-05-16T10:42:56.447 に答える
-2

ボーダーを Inner クラスから Cell1 および Cell2 クラスに変更します。次に、Cell1 クラスと Cell2 クラスに固定の高さを与えます。

.cell1 {
width: 45%;
margin-right: 1%;
float: left;
border: 1px solid #CCC;
height:400px; 
}

.cell2 {
width: 45%;
margin-left: 1%;
float: left;
border: 1px solid #CCC;
height:400px;
}

ここにフィドルがあります http://jsfiddle.net/QDBff/31/

于 2013-05-16T10:38:09.143 に答える