Comment conserver les flottants CSS sur une seule ligne?

216

Je veux avoir deux articles sur la même ligne en utilisant float: leftl'article 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 . Vous savez ... comme c'était le cas avec les tables.

Le but est d'empêcher l'article de droite de s'enrouler quoi qu'il arrive .

Comment dire au navigateur en utilisant CSS que je préfère étirer le contenantdiv plutôt que l'envelopper pour que le float: right;div soit en dessous du float: left; div?

ce que je veux:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /
Jiaaro
la source
54
Ce serait cool si StackOverlow ajoutait un petit widget de dessin pour que nous puissions faire ces diagrammes avec la souris? Cela pourrait être plus approprié pour les sites SE orientés vers la conception ... mais ce serait quand même génial.
JoeCool
5
@JoeCool Le site UX SE dispose déjà d'un outil pour y créer des maquettes. meta.ux.stackexchange.com/questions/1291/…
frank hadder

Réponses:

77

Enveloppez vos <div>s flottants dans un conteneur <div>qui utilise ce hack de min-largeur multi-navigateur:

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

Vous devrez peut-être également définir le «débordement», mais probablement pas.

Cela fonctionne parce que:

  • La !importantdéclaration, combinée avec le fait min-widthque tout reste sur la même ligne dans IE7 +
  • IE6 n'implémente pas min-width, mais il a un bogue tel qu'il width: 100pxremplace la !importantdéclaration, ce qui fait que la largeur du conteneur est de 100 pixels.
Eric Wendelin
la source
Cela fonctionne très bien pour deux flotteurs, mais pas trois. Peut-il fonctionner pour trois ??
tylerthemiler
15
Le seul problème est qu'il force une largeur minimale fixe.
Matt Montag
6
Ce n'est pas une solution, c'est juste une largeur minimale, lorsque votre contenu devient vraiment petit (voir la question), donc en dessous de 100 pixels, vous avez le même problème. Surtout avec les cellules du tableau, cela reste un problème.
Sanne
Absolument choquant - a résolu mon problème instantanément. Je me suis disputé avec ce problème dans une mise en page bootstrap simple à deux colonnes avec plus de hacks de boîte que je ne peux en nommer, mais cela a parfaitement fonctionné. Merci pour l'explication de la raison pour laquelle ce travail - des choses fascinantes, le dom est.
nocarrier
Cela peut fonctionner avec des divs, mais je viens de le tester avec ul / li et cela ne fonctionne pas :(
AsGoodAsItGets
132

Une autre option consiste, au lieu de flotter, à définir la propriété d'espace blanc nowrap sur une div parent:

.parent {
     white-space: nowrap;
}

et réinitialisez l'espace blanc et utilisez un affichage en bloc pour que les divs 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/

Innovaat
la source
4
Certainement la meilleure solution que j'ai vue. Cela fonctionne pour mon cas d'utilisation, mais je me demande dans quelle mesure il est pris en charge. Heureusement, utiliser des flotteurs pour TOUT devient lentement une chose du passé.
Ryan Ore
1
Pouvez-vous expliquer comment cela fonctionne? ou des liens au moins?
Anirudhan J
4
@AnirudhanJ Ce n'est pas trop difficile. Inline-block permet aux éléments de s'écouler normalement avec du texte en ligne (mais conserve certaines des capacités de remplissage / marge du bloc), et vous dites littéralement au CSS de ne pas encapsuler le texte avec l'option white-space: nowrap (en appliquant "normal "à nouveau à l'enfant, pour éviter qu'il ne se propage dans tout)
Brian
Comment faire pour que le div à droite flotte à droite de l'écran? Cela met simplement deux blocs en ligne l'un à côté de l'autre qui ne coupera pas la ligne.
addMitt
vous pouvez également utiliser l' espacement des lettres: -3px (ou la valeur qui vous convient ) pour supprimer l'espace entre les éléments du bloc en ligne. PS: mieux que la réponse acceptée ;
Claudiu
15

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

Aucun hacks ou tableaux HTML nécessaires.

Tsar
la source
10

Solution 1:

affichage: table-cellule (pas largement pris en charge)

Solution 2:

les tables

(Je déteste les hacks.)

pkario
la source
8

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

Steve Clay
la source
4

Êtes-vous sûr que les éléments flottants au niveau du bloc sont la meilleure solution à ce problème?

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

glénatron
la source
Eh bien, cela fonctionne pour à peu près tout et la mise en page existante est basée dessus, j'essaie simplement de résoudre un problème de rupture de la mise en page lorsque vous augmentez trop la taille du texte OU redimensionnez la fenêtre du navigateur plus petite que 700 px de large
Jiaaro
2

je recommanderais d'utiliser des tables pour ce problème. J'ai un problème similaire et tant que le tableau n'est utilisé que pour afficher des données et non pour la mise en page principale, il est correct.

Rob Elliott
la source
2

Ajoutez cette ligne à votre sélecteur d'éléments flottants

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

Cela empêchera le rembourrage et les bordures d'être ajoutés à la largeur, donc l'élément reste toujours en ligne, même si vous en avez par exemple. trois éléments avec une largeur de 33,33333%

Nebojsha
la source
0

Lorsque l'utilisateur réduit la taille de la fenêtre horizontalement et que les flottants s'empilent verticalement, supprimez les flotteurs et sur le deuxième div (qui était un flotteur), utilisez margin-top: -123px (votre valeur) et margin-left: 444px (votre valeur) pour positionnez les divs telles qu'elles apparaissent avec des flotteurs. Lorsque cela est fait de cette façon, lorsque la fenêtre se rétrécit, le div droit reste en place et disparaît lorsque la page est trop étroite pour l'inclure. ... ce qui (pour moi) est mieux que d'avoir le div droit "sauter" en dessous du div gauche lorsque la fenêtre du navigateur est rétrécie par l'utilisateur.

Bruce Allen
la source
-3

La façon dont j'ai pu contourner ce problème était d'utiliser du jQuery. La raison pour laquelle je l'ai fait de cette façon était que A et B étaient des largeurs en pourcentage.

HTML:

<div class="floatNoWrap">
    <div id="A" style="float: left;">
        Content A
    </div>
    <div id="B" style="float: left;">
        Content B
    </div>
    <div style="clear: both;"></div>
</div>

CSS:

.floatNoWrap
{
    width: 100%;
    height: 100%;
}

jQuery:

$("[class~='floatNoWrap']").each(function () {
    $(this).css("width", $(this).outerWidth());
});
ScubaSteve
la source
1
Un cadre pour CSS? Je dois -jquery pour TOUTES les recherches JavaScript et en raison d'un mépris total et total de la qualité, nous devons commencer à rechercher explicitement CSS avec -jquery aussi? Faites-le bien ou ne le faites pas du tout.
John