Comment conserver les flottants CSS en une seule ligne?

Question

Je souhaite 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 si vous redimensionnez le navigateur très petit . Vous savez ... comme c'était le cas avec les tables.

Le but est de garder l'élément à droite de ne pas envelopper quoi qu'il arrive .

Comment dire au navigateur utilisant les CSS que je préférerais étirer le div contenant le contenu de manière à ce que le float: right; div se situe sous le float: left; <=>?

ce que je veux:

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

Answer 1

Enveloppez vos <div> flottants dans un conteneur !important utilisant ce hack min-largeur inter-navigateurs:

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

Vous pouvez aussi définir & "; débordement &"; mais probablement pas.

Cela fonctionne car:

• La déclaration min-width, associée à width: 100px, fait que tout reste sur la même ligne dans IE7 +
• IE6 n'implémente pas <=>, mais présente un bogue tel que <=> remplace la déclaration <=>, ce qui fait que la largeur du conteneur est de 100px.

Answer 2

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

.parent {
     white-space: nowrap;
}

et réinitialisez l'espace blanc et utilisez un affichage inline-block afin 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/

Answer 3

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

Aucun hacks ni tableau HTML requis.

Answer 4

Solution 1:

display: table-cell (pas largement supporté)

Solution 2:

tables

(Je déteste les hacks.)

Answer 5

Autre option: ne faites 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.

Answer 6

Êtes-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 une façon de faire ce que je veux, c’est que je me suis retrouvé coincé dans un tunnel en ce qui concerne mon balisage (en pensant & "comment puis-je créer ces éléments this ? &";)) plutôt que de revenir en arrière et de regarder ce que j’ai exactement besoin d’atteindre et peut-être retravailler mon html légèrement pour faciliter cela.

Answer 7

Je vous recommande d'utiliser des tables pour résoudre ce problème. Je rencontre un problème similaire et tant que le tableau est utilisé pour afficher des données, pas pour la présentation de la page principale, il convient.

Answer 8

Ajoutez 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%

Answer 9

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 seconde div (qui était un flottant), utilisez margin-top: -123px (votre valeur) et margin-left: 444px (votre valeur) pour positionner les divs tels qu’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. ... qui (pour moi) est mieux que d'avoir la div du côté droit & "; sauter &"; en dessous de la division de gauche lorsque la fenêtre du navigateur est réduite par l'utilisateur.

Answer 10

La façon dont j’ai réussi à éviter cela consistait à utiliser jQuery. La raison pour laquelle je l’ai fait de cette façon était parce 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());
});