web-dev-qa-db-ja.com

CSS3表示：テーブルセルとフロート？

長いdivコンテナーをdisplay:tableに設定し、その中の＆divをdisplay:table-cell; vertical-align: middleに設定しました。

垂直方向の配置の結果には本当に満足していますが、

  • これら3つのdivの幅はわかりませんが、
  • 私はそれらの1つをdivコンテナーの右端に配置します（もちろんパディングをマイナスします）。
  • float: rightはdisplay: table-cellでは機能しません。

ここに例があります（黄金のdivを右にフロートさせたい）。 JSは使えません。 IE7 +、またはIE7が不可能な場合はIE8 +で動作させるために必要です。ヒント/アイデアはありますか？

http://jsfiddle.net/cZ7Th/2/

css-floatvertical-alignmentcss-tables
11
Wordpressor

これがIE7または8で動作するかどうかはわかりませんが、width: 1px、width: autoおよびwhite-space: nowrap。テーブルレイアウトのすべてのセルを1ピクセル幅として定義しますが、折り返さないようにします。次に、右にフロートするセルの前に空のパディングセルを追加します。

http://jsfiddle.net/wZ96P/

Chrome、Opera、Firefox、IEの最新バージョンで少なくとも動作するようです。

11
jlahd

この垂直位置合わせは機能しません：

<div style="display: table-cell; vertical-align: middle; float: right">...</div>

しかし、これには私にとってはうまくいきます：

<div style="float: right">
  <div style="display: table-cell; vertical-align: middle">...</div>
</div>
6
Lukasz Frankowski

フロート時！=なしの場合、表示=ブロック

3
Markelov Viktor