3

TD内の絶対位置に関するスタック交換については、かなりの数の質問がありますが、特定の問題の解決策が見つかりませんでした。

次のレイアウトを実装する必要があります TD内の要素のレイアウト

このセルは、テーブル内の表形式のデータ表現の一部です。

セルの内容はテキストデータです。

テキストは複数行にすることができ、垂直方向と水平方向に中央揃えにする必要があります。セルの高さは、テーブルの行の高さが他のセルのコンテンツによって引き伸ばされる可能性があるため変化する可能性がありますが、セルのテキストは常に垂直方向に揃える必要があります（現在はによって達成されていますvertical-align: middle）

絶対に配置された要素は、常にセルの右上隅に配置する必要があります。

相対的なdivをTD内に配置し、次に絶対位置の要素をdiv内に配置する手法については知っていますが、セルの高さが可変であり、垂直方向に整列されたセルテキストが必要なため、オプションではないようです。

ソリューションはIE8+、Chrome 21+、FF15+と互換性がある必要があります

4

1 に答える 1

1

閉じるボタンの周りに div を挿入します。

<table>
    <tr>
       <td>
          <div class="wrapper">
              <div class="close">X</div>
          </div>
          My vertically aligned text.
       </td>
    </tr>
</table>

次に、閉じるボタンを配置します。

table td div.wrapper {
    position: relative;
}

table td div.close {
    position: absolute;
    right: 0;
    top: 0;
}
于 2013-01-09T13:36:27.333 に答える