4

テーブルがあり、各セルの右上隅に要素を配置するセルが必要です。

同じことを尋ねる他のいくつかの質問を読みましたが、どれも問題を解決していないようです。

私が読んだ1つの解決策は、セルの内部を相対的な位置でdivでラップすることですが、高さと幅が100％に設定されていても、divがセル全体を埋めないため、それは機能しません。

私が読んだ他の解決策は、セルの高さを手動で設定し、div の高さを同じ値に手動で設定することです。テーブルが動的に生成されており、セルの特定のサイズを保証できないため、これもうまくいきません。

問題を示すコードを次に示します。

<table border="1">
<tr>
    <td>
        <div style="position:relative; height: 100%; background: yellow;">
            <p>This is some content</p>
            <div style="position:absolute; right:0px; top:0px; background: red;">
               absolute
            </div>
        </div>
    </td>
    <td>
        <div style="position:relative;  height: 100%;  background: yellow;">
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <p>This is some content</p>
            <div style="position:absolute;right:0px; top:0px; background: red;">
               absolute
            </div>
        </div>
    </td>
</tr>

その例は次のようになりますhttp://jsfiddle.net/hqtEQ/

すべてのセルの右上隅に赤い div を配置する方法はありますか?

4

2 に答える 2

3

a のデフォルトの垂直方向の配置tdは中央揃えです。したがって、セル内の他のコンテンツが気にならない場合は、単に置き換えてください

<td>

と

<td style="vertical-align: top;">

(またはこの効果に CSS クラスを追加) すると、レイアウトが意図したとおりに機能します。

http://jsfiddle.net/hqtEQ/1/を参照してください

于 2013-07-18T22:51:18.450 に答える
1

tdFirefox はwithに何かを直接配置できない唯一のブラウザーのようですposition:relative(バグ 63895のため)。他のブラウザでは問題ありません。また、バージョン 22 以降、Firefox は Flexbox の最新の構文をサポートしており、a) テーブルの動作をエミュレートでき、b) に問題はありませんposition: relative。Firefox だけの回避策として使用するのはどうですか?

td {
    position: relative;
    background: yellow;
}

:-moz-any-link > html, tr {
    display: flex;
    flex-direction: row;
}

:-moz-any-link > html, td {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

フィドル

于 2013-07-19T02:10:52.273 に答える