cell & float?

 

I've got a long div container set to display:table and & divs within it set to display:table-cell; vertical-align: middle display:table-cell; vertical-align: middle .

I'm really happy with the results of vertical alignment, but:

  • I don't know the width of these 3 divs,
  • I want one of them to be on the very right side of div container (minus padding of course),
  • float: right doesn't work with display: table-cell .

    • Here's an example (I want to float the golden divs to the right). I can't use JS. I need it to work in IE7+, or IE8+ if impossible for IE7. Any hints / ideas?

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

    I don't know if this works with IE7 or 8, but I have done this by combining width: 1px , width: auto and white-space: nowrap . Define all cells in the table layout as one-pixel wide, but prevent wrapping; then add an empty padding cell before the ones you want to float right.

    http://jsfiddle.net/wZ96P/

    Seems to work with the modern versions of Chrome, Opera, Firefox, and IE, at least.

    For this vertical align doesn't work: 

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

    But for this it works for me: 

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

    当float！= none时，则显示= block

    链接地址: http://www.djcxy.com/p/94730.html

    上一篇: 如何将孩子的“身高”扩大到父母身高

    下一篇: 细胞和浮游物？