CSS3 डिस्प्ले: टेबल-सेल और फ्लोट?

Question

मैं एक लंबे div कंटेनर के अंदर यह display:table-cell; vertical-align: middle करने के लिए सेट display:table और & divs करने के लिए सेट मिल गया है।

मैं लंबवत संरेखण के परिणामों के साथ बहुत खुश हूँ, लेकिन:

• मैं इन 3 divs की चौड़ाई पता नहीं है,
• मैं उनमें से एक चाहते हैं बहुत सही पर होना div कंटेनर (बेशक शून्य से गद्दी), के पक्ष
• float: rightdisplay: table-cell साथ काम नहीं करता।

यहां एक उदाहरण है (मैं सुनहरे divs को दाईं ओर फ़्लोट करना चाहता हूं)। मैं जेएस का उपयोग नहीं कर सकता। आईई 7 + या आईई 8 + में आईई 7 के लिए असंभव होने पर मुझे इसे काम करने की ज़रूरत है। कोई संकेत/विचार?

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

Answer 1

मैं अगर यह IE7 या 8 के साथ काम करता है पता नहीं है, लेकिन मैं width: 1px, width: auto और white-space: nowrap के संयोजन के द्वारा यह किया है। तालिका लेआउट में सभी कोशिकाओं को एक-पिक्सेल चौड़ा के रूप में परिभाषित करें, लेकिन रैपिंग को रोकें; फिर उन लोगों के सामने एक खाली पैडिंग सेल जोड़ें जिन्हें आप सही फ़्लोट करना चाहते हैं।

http://jsfiddle.net/wZ96P/

, कम से कम क्रोम, ओपेरा, Firefox और IE के आधुनिक संस्करणों के साथ काम करने लगता है।

Answer 2

इस ऊर्ध्वाधर संरेखित काम नहीं करता है:

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

लेकिन इसके लिए यह मेरे लिए काम करता है: flexbox के लिए

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

Answer 3

When float!=none then display = block