Flotteurs CSS - comment j’ai garder sur une seule ligne ?

Question

Je veux avoir deux articles sur la même ligne à l'aide de 'float: left' de l'élément sur la gauche.

Je n'ai pas de problèmes de la réalisation de ce seul fait. Le problème est, je veux les deux éléments pour rester sur la même ligne , même lorsque vous redimensionnez le navigateur de très petites. Vous savez... comme il a été avec des tables.

Le but est de garder le point sur le droit d'emballage n'importe quoi.

Alors, comment puis-je le dire au navigateur à l'aide de css que je préfère étirer la div contenant de l'envelopper de sorte que la de la float: right; div est en dessous de la float: left; div?

exemple: ce que je veux:

                                             \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

Answer 1

Une autre option est, au lieu de flotter, d’affecter à la propriété white-space nowrap un div parent :

réinitialiser l’espace blanc et utiliser un affichage d’inline-block, donc les divs rester sur la même ligne, mais vous pouvez toujours lui donner une largeur.

Answer 2

Enveloppez votre flottante <div>s dans un récipient <div> qui utilise ce cross-browser min-width hack:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

Vous pouvez aussi définir la "dépassement", mais probablement pas.

Cela fonctionne parce que:

• L' !important déclaration, combiné avec min-width faire tout pour rester sur la même ligne dans IE7+
• IE6 ne pas mettre en oeuvre min-width, mais il a un bug tel que width: 100px remplace l' !important déclaration, causant de la largeur du conteneur à 100px.

Answer 3

Enveloppez votre corps flottants dans un div avec un min-width supérieure à la largeur combinée + marge des flotteurs.

Aucun hacks ou des tableaux HTML nécessaires.

Answer 4

Solution 1 :

Display : table-cell (pas largement pris en charge)

Solution 2 :

tables

(Je déteste les hacks).

Answer 5

Une autre option : flotter pas votre colonne de droite ; juste lui donner une marge de gauche d’aller au-delà du flotteur. Vous aurez besoin d’un hack ou deux réparer IE6, mais c’est l’idée de base.