Comment conserver les flottants CSS sur une seule ligne?

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  /  <---
 +---------------+  +------------------------\
                                             /

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.

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/

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.

Solution 1:

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

Solution 2:

les tables

(Je déteste les hacks.)

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.

Ê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.

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.

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%

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.

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());
});