web-dev-qa-db-fra.com

Comment conserver les flottants CSS en une seule ligne?

Je veux avoir deux éléments sur la même ligne en utilisant float: left pour l'élément de gauche.

Je n'ai aucun problème à y parvenir seul. Le problème est que je veux que les deux éléments restent sur la même ligne même lorsque vous redimensionnez le navigateur très petit . Tu sais ... comme si c'était avec les tables.

Le but est de garder l’article à droite de l’emballage , quoi qu’il en soit .

Comment dire au navigateur utilisant CSS que je préférerais étirer le contenant div plutôt que de l’envelopper afin que le float: right; div soit sous le float: left;div?

ce que je veux:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
csscss-floatcss-tablesstretching
214
Jiaaro

Enveloppez votre <div>s flottant dans un conteneur <div> qui utilise ce hack min-largeur entre navigateurs:

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

Vous peut devez également définir le "débordement", mais probablement pas.

Cela fonctionne parce que:

  • La déclaration !important, associée à min-width, fait que tout reste sur la même ligne dans IE7 +
  • IE6 n'implémente pas min-width, mais il a un bogue tel que width: 100px remplace la déclaration !important, ce qui entraîne une largeur de conteneur de 100px.
77
Eric Wendelin

Une autre option consiste, au lieu de flottant, à définir la propriété white-space maintenant en un div parent:

.parent {
     white-space: nowrap;
}

et réinitialisez l'espace blanc et utilisez un affichage bloc en ligne pour que les div restent sur la même ligne mais vous pouvez toujours lui donner une largeur.

.child {
    display:inline-block;
    width:300px;
    white-space: normal;
}

Voici un JSFiddle: https://jsfiddle.net/9g8ud31o/

130
Innovaat

Enveloppez vos corps flottants dans un div avec une largeur minimale supérieure à la largeur combinée + marge des corps flottants.

Aucun hacks ou tables HTML nécessaires.

15
Czar

Solution 1:

display: table-cell (pas largement supporté)

Solution 2:

les tables

(Je déteste les hacks.)

10
pkario

Une autre option: ne pas flotter votre colonne de droite; donnez-lui simplement une marge gauche pour le déplacer au-delà du flotteur. Vous aurez besoin d'un bidouillage ou deux pour réparer IE6, mais c'est l'idée de base.

8
Steve Clay

Etes-vous sûr que les éléments flottants au niveau des blocs sont la meilleure solution à ce problème?

Souvent, avec des difficultés de CSS dans mon expérience, il s’avère que la raison pour laquelle je ne vois pas comment faire ce que je veux, c’est que je me suis retrouvé pris dans une vision en tunnel en ce qui concerne mon balisage (en pensant "comment puis-je faire - ces éléments font this? ") plutôt que de revenir en arrière et de regarder ce que c’est exactement ce que je dois réaliser et peut-être retravailler légèrement mon code HTML pour faciliter cela.

4
glenatron

je recommanderais d'utiliser des tables pour résoudre ce problème. Je rencontre un problème similaire et tant que la table est utilisée pour afficher certaines données, elle convient parfaitement.

2
Rob Elliott

Ajouter cette ligne à votre sélecteur d'élément flottant

.floated {
    float: left;
    ...
    box-sizing: border-box;
}

Cela empêchera l'ajout de bordures et de bordures à la largeur, ainsi l'élément restera toujours en ligne, même si vous avez par exemple. trois éléments avec une largeur de 33,33333%

2
Nebojsha

Lorsque l'utilisateur réduit la taille de la fenêtre horizontalement et que les flottants s'empilent verticalement, supprimez les flottants et sur la deuxième div (qui était un flottant), utilisez margin-top: -123px (votre valeur) et margin-left: 444px (votre valeur) pour positionner les divs comme ils sont apparus avec des flotteurs. Lorsque cela est fait, lorsque la fenêtre se rétrécit, la division de droite reste en place et disparaît lorsque la page est trop étroite pour l'inclure. ... ce qui (à mon avis) est meilleur que de laisser la div de droite "sauter" en dessous de la div de gauche lorsque la fenêtre du navigateur est rétrécie par l'utilisateur.

0
Bruce Allen