Hiển thị CSS3: bảng di động & nổi?

Question

Tôi đã có một bộ chứa div dài được đặt thành display:table và & số div trong đó được đặt thành display:table-cell; vertical-align: middle.

Tôi thực sự hài lòng với kết quả của sự liên kết dọc, nhưng:

• tôi không biết chiều rộng của những 3 divs,
• Tôi muốn một trong số họ để được vào rất đúng bên của div container (trừ padding của khóa học),
• float: right không hoạt động với display: table-cell.

Đây là một ví dụ (Tôi muốn thả các div vàng ở bên phải). Tôi không thể sử dụng JS. Tôi cần nó để làm việc trong IE7 +, hoặc IE8 + nếu không thể cho IE7. Bất kỳ gợi ý/ý tưởng?

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

Answer 1

Tôi không biết nếu điều này làm việc với IE7 hoặc 8, nhưng tôi đã làm điều này bằng cách kết hợp width: 1px, width: auto và white-space: nowrap. Xác định tất cả các ô trong bố cục bảng dưới dạng một pixel rộng, nhưng ngăn chặn gói; sau đó thêm một ô đệm trống trước các ô bạn muốn thả nổi ngay.

http://jsfiddle.net/wZ96P/

Dường như làm việc với các phiên bản hiện đại của Chrome, Opera, Firefox và IE, ít nhất.

Answer 2

Đối với class dọc này không làm việc:

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

Nhưng đối với này nó làm việc cho tôi:

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

Answer 3

When float!=none then display = block