Comment éviter d'emballage en CSS float

J'ai une page avec 2 colonnes côte à côte (défini à la fois par float: left).

Mon problème est que quand je l'échelle du navigateur à être plus petits, la colonne de droite sera chuté au-dessous de la colonne de gauche.

comment puis-je éviter cela? et encore pour les faire être côte-à-côte, peu importe la taille de l'écran.

Merci

OriginalL'auteur Himberjack | 2010-08-26

  1. 3

    Faire le conteneur parent de largeur fixe ou régler le dépassement de capacité à l'auto. Par exemple, si vos deux colonnes sont 200px de large

    <div style="width: 400px; overflow: auto;">
  <div style="float: left; width: 200px;"></div>
  <div style="float: left; width: 200px;"></div>
</div>
    Merci. je ne peux pas faire le parent automatique de la largeur?
    sauf si vous spécifiez la largeur, la valeur par défaut des éléments de bloc est d'ajuster automatiquement la largeur en fonction de l'espace disponible. Vous pouvez utiliser javascript pour calculer la largeur après le chargement de la page.
    Parce que les flotteurs sont bizarre. stackoverflow.com/questions/3480086/...
    Vous pouvez définir le wrapper width à 100% et overflow:auto. Cela devrait provoquer le wrapper pour redimensionner le navigateur et provoquer une barre de défilement apparaît. Non testé
    vrai, peut causer d'autres problèmes.

    OriginalL'auteur Ben Rowe

  2. 5

    Alternativement, si vous le souhaitez redimensionner avec le navigateur devra définir la largeur en pourcentage.
    Donc:

    .div1 {
float:left;
width:49%;
background:red;
}

.div2 {
float:left;
width:49%;
background:orange;
}

    Certaines personnes de 50% d'ici, j'ai tendance à ne pas

    +1 pour 49%. Une bonne protection contre la divagation des pixels. Notez que les pourcentages et les mesures fixes (c'est à dire les marges, le rembourrage, les frontières ne sont pas bien jouer ensemble.
    Si vous avez des "errants pixels", vous êtes en train de faire quelque chose de grave.
    Je suis d'accord avec Andrew. Si vous avez besoin d'un liquide de largeur, vous avez juste besoin de faire tout le liquide de la largeur OU ajouter de la rémunération fixe-largeur propriétés via des marges négatives. Dans l'ensemble, en espérant que 49% ne il me frappe comme une mauvaise pratique, d'autant plus que ce pourcentage pourrait ne pas être tout à fait suffisant pour toutes les résolutions. Le meilleur pour être pleinement explicite dans un style qui pourrait potentiellement causer des problèmes. Bien sûr, je suis le genre de gars qui revient toujours marges/padding/border à 0 et il est la cause d'une surcharge de travail. Peut-être que des mesures exactes ne sont pas nécessaires pour chaque cas d'utilisation.
    Il devrait être de 50%, si le rembourrage est à vous jeter hors soit utiliser des marges négatives ou (mieux) de changement de la boîte-modèle de dimensionnement.
    Cette réponse est à partir de 2010 - 'errants des pixels ont été créés par quelques pauvres navigateur arrondi. À ma connaissance, ils ont tous été résolus donc - pour ceux qui sont aujourd'hui la mise en œuvre de cette - oui, l'utilisation de 50%

    OriginalL'auteur Stuart Burrows