Arrêtez les divs flottants de l’emballage

Je veux avoir une rangée de divs (cellules) qui ne s’emballent pas si le navigateur est trop étroit pour s’y adapter.

J’ai cherché Stack et je n’ai pas trouvé de réponse fonctionnelle à ce que je pense devrait être une simple question css.

Les cellules ont une largeur spécifiée. Cependant, je ne veux pas spécifier la largeur de la ligne, la largeur doit être automatiquement la largeur de ses cellules enfants.

Si la fenêtre d’affichage est trop étroite pour accueillir les lignes, alors le div doit déborder avec les barres de défilement.

Veuillez fournir votre réponse en tant qu’extrait de code de travail, car j’ai essayé beaucoup de solutions que j’ai vues ailleurs (comme spécifier la largeur: 100% et elles ne semblent pas fonctionner).

Je recherche une solution HTML / CSS uniquement, pas de JavaScript.

.row { float: left; border: 1px solid yellow; width: 100%; overflow: auto; } .cell { float: left; border: 1px solid red; width: 200px; height: 100px; } 
 
a
b
c

En ce moment je suis vraiment difficile de coder la largeur de la ligne à un très grand nombre.

La propriété CSS display: inline-block été conçue pour répondre à ce besoin. Vous pouvez en lire un peu ici: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Voici un exemple de son utilisation. Les éléments clés sont que l’élément de row a white-space: nowrap et les éléments de la cell ont un display: inline-block . Cet exemple devrait fonctionner sur la plupart des principaux navigateurs. un tableau de compatibilité est disponible ici: http://caniuse.com/#feat=inline-block

    
a
b
c

Vous voulez définir la min-width sur la ligne, de sorte que lorsque le navigateur est redimensionné, il ne va pas en dessous et envelopper.

Après avoir lu la réponse de John, j’ai découvert que les éléments suivants semblaient fonctionner pour nous (il n’était pas nécessaire de spécifier la largeur):

  
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello

Le seul moyen que j’ai réussi à faire est d’utiliser le overflow: visible; et width: 20000px; sur l’élément parent. Il n’y a aucun moyen de le faire avec le niveau CSS 1 dont je suis au courant et j’ai refusé de penser que je devrais aller au plus haut niveau avec le niveau CSS 3. L’exemple ci-dessous a 18 menus qui dépassent mon écran LCD 1920×1200 , si votre écran est plus grand, dupliquez simplement les éléments du menu du premier niveau ou redimensionnez simplement le navigateur. Alternativement et avec des niveaux de compatibilité de navigateur légèrement inférieurs, vous pouvez utiliser les requêtes de support CSS3.

Voici un exemple complet de démonstration de copier / coller …

 < ?xml version="1.0" encoding="UTF-8"?> < !DOCTYPE html>   XHTML5 Menu Demonstration    

Hover the first menu at the top-left.

Pour moi (en utilisant bootstrap), la seule chose qui fonctionnait était la configuration de display:absolute;z-index:1 sur la dernière cellule.

J’ai eu un problème quelque peu similaire où une zone délimitée consistait en une image dans un flottant: un bloc gauche et un bloc de texte non flottant. La zone a une largeur de fluide. Le texte serait, de par sa conception, bouclé le long du côté droit de l’image. Le problème était que le texte commençait par une balise

, dont le premier mot est le mot “From”. Comme je redimensionnais la fenêtre sur une largeur inférieure, le texte non flottant ne laisserait, pour une certaine plage de largeurs, que le mot “From” en haut de la zone de recouvrement, le rest du texte étant écrasé sous le flottant bloc. Ma solution consistait à agrandir le premier mot du tag, en remplaçant l’espace qui le suivait par ce code, x . L’effet était de faire le premier mot, au lieu de “De”, “FromxNextWord”, où “x”, invisible, ressemblait à un espace. Maintenant, mon premier mot était assez grand pour ne pas être abandonné par le rest du bloc de texte.