1

テーブル セル内に 2 つの div があり、1 つをセルの上部に、もう 1 つをセルの下部に配置したいと考えています。

この jsFiddle http://jsfiddle.net/davew9999/3Mwz5/11/を作成しました。これは、私が持っている HTML 構造を示しています。コードは次のとおりです。

HTML

<table>
<tbody>
    <tr>
        <td>
            <div class="cell">
                <div class="top">This text is dynamic so can't set fixed height on this div. For example
                    this text could be very long while the others are quite short.</div>
                <div class="bottom">This should always be at the bottom of the table cell and also is dynamic
                    and can't be a fixed height.</div>
            </div>
        </td>
        <td>
            <div class="cell">
                <div class="top">Not much text.</div>
                <div class="bottom">This should always be at the bottom of the table cell and also is dynamic
                    and can't be a fixed height</div>
            </div>
        </td>
    </tr>
</tbody>
</table>

CSS

tr {
    vertical-align: baseline;
}
td {
    padding:10px
}
.cell {
    position: relative;
}
.bottom {
    position: absolute;
    bottom: 0;
}

私が見つけたすべての解決策には、ラッパー div (私の例ではクラス "cell" を持つ div) に高さを設定することが含まれます。ただし、内容が動的であるため、これは機能しません。

ロード時に td 要素の高さを計算し、クラス「セル」で div を同じ高さに設定するという解決策を試しました。これは、ブラウザ ウィンドウのサイズを変更してテーブル セルの高さが変わるまで機能しました。ブラウザ ウィンドウのサイズ変更イベントの処理を実験しましたが、これはクリック アンド ドラッグのサイズ変更中に頻繁にトリガーされます。IE8 とその遅い JavaScript エンジンで動作し、200 以上の td 要素を使用して、これが妥当な解決策ではないことを確認する必要があります。

私に望ましい出力を与える解決策は、divの内容をクラス「トップ」で分割し、クラス「ボトム」でdivを2つのテーブル行に分割することですが、これまたはより良いCSSおよびJavaScriptに対する純粋なCSSソリューションがあるかどうか疑問に思っています私が試したことの解決策。

4

1 に答える 1

1

iPadでの講義で立ち往生しているため、これをテストすることはできませんが、

相対最下位 -1

要素を絶対最下部に固定する必要があります。逆もまた同様です。

同様に、親に高さを設定するだけでなく、e セルが td と同じ高さになるように強制することもできます (これを 100% 投与しますか?)

jfiddle が ipad の chrome/safari の問題を修正するまで、ATM をテストすることはできません。

編集：足場クラスがあるあなたのために、Twitterのブートストラップはこれを行いませんか？

編集 2: 足場とレスポンシブhttp://twitter.github.com/bootstrap/scaffolding.html#responsive

于 2013-02-11T12:54:59.493 に答える