Arrêter flottant divs d'emballage

Je veux avoir une ligne de divs (cellules) qui n'emballe pas si le navigateur est trop étroit pour s'adapter à eux.

J'ai cherché de la Pile, et ne pouvait pas trouver de travail, de répondre à ce que je pense devrait être une simple css question.

Les cellules ont une largeur spécifiée. Mais je ne veux pas de spécifier la largeur de la ligne, la largeur doit automatiquement à la largeur de son enfant cellules.

Si la fenêtre est trop étroite pour accueillir les lignes, puis la div doit débordement avec des barres de défilement.

Veuillez indiquer votre réponse en tant que travail extrait de code, que j'ai essayé beaucoup de solutions que j'ai vu ailleurs (comme préciser width: 100% et ils ne semblent pas fonctionner).

Je suis à la recherche d'un code HTML/CSS seule solution, pas de JavaScript.

CSS:

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

HTML:

<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

Pour le moment, je suis effectivement dur de codage de la largeur de la ligne à un grand nombre.

a l'une des réponses ci-dessous pour vous? Je ne suis pas du tout avoir du succès avec l'un d'eux.
J'ai juste essayé toutes les réponses, et aucun n'a fonctionné pour moi. Le problème était que je devais centre de deux flotter à gauche de la vrd, et de prévenir l'un sur le droit d'être poussé ci-dessous à gauche après la fenêtre est redimensionnée.
Je pense que mon exemple est exactement ce que vous cherchez, je suis tombé sur ce même problème aujourd'hui. Les menus déroulants de débordement, mais le premier niveau ne les emballez pas.

InformationsquelleAutor Nicholas | 2011-04-11

104

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

Ci-dessous est un exemple de son utilisation. Les éléments clés sont la row élément a white-space: nowrap et la cell éléments ont display: inline-block. Cet exemple devrait fonctionner sur la plupart des grands navigateurs; un tableau de compatibilité est disponible ici: http://caniuse.com/#feat=inline-block
```
<html>
<body>
<style>

.row {
    float:left;
    border: 1px solid yellow;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    width: 200px;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>


</body>
</html>
```
- +1; cette réponse qui fonctionne pour moi. Si tout le reste échoue, essayez <nobr>.
- Ne fonctionne qu'avec IE8 mode et de meilleure qualité.
- Ajouter <!DOCTYPE html> ou <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> vers le haut de l'HTML à avoir c'est à dire pas par défaut en mode quirks.
- Note: j'ai eu mon type de cellule divs mis en place avec float:left, et cela a forcé le calculées style de bloc, au lieu de inline-block. A pris un certain temps à comprendre, donc pensé qu'il valait mieux le partager.
- Cela ne fonctionne pas avec la dernière cellule de float: right, n'est ce pas?
- Ce n'est pas vraiment un exemple de la façon de garder flottait divs d'emballage -- vous venez de unfloated les cellules. J'ai une mise en page avec certains à gauche et à droite de flotteurs, donc je ne peux pas faire disparaître les flotteurs pour résoudre l'emballage question.
- Haha, juste assez. C'est un pédant distinction, mais vous avez raison. Je n'ai pas à résoudre "stop flottait divs de l'habillage", j'ai résolu le sens de réel question "comment puis-je faire mon travail de mise". Pour répondre à la première: je suis raisonnablement sûr il n'existe aucun moyen pour empêcher les divs flottants à partir de l'emballage. Tout comme le demandeur, vous aurez besoin de trouver une autre façon de coder la mise en page que vous décrivez.
InformationsquelleAutor Calvin
30

Vous souhaitez définir min-width sur la ligne, donc quand le navigateur est re-taille, il ne va pas au-dessous et enveloppement.
- Ce serais de travailler même avec des flotteurs. Je pense que la vraie réponse.
- D'accord avec @Danon - cela fonctionne alors que le inline-block introduit l'alignement vertical des questions.
- Dépend de vos besoins. Ce n'est d'arrêter les divs flottants à partir d'habillage lorsque la page est redimensionnée, mais le demandeur a déclaré: "je ne veux pas de spécifier la largeur de la ligne, la largeur doit automatiquement à la largeur de son enfant cellules". Manuel de la largeur de la spécification exige que certains reprenaient le travail, car vous avez besoin de calculer la largeur totale de la ligne. Pire encore, si vos cellules sont de largeur variable (par exemple, parce qu'ils sont de la taille d'une ligne de texte à l'intérieur d'eux) en calculant le total peut être difficile ou impossible.
- -1; Ce qui va à l'encontre de ce que l'OP a expressément déclaré dans sa question, à savoir de ne PAS avoir à spécifier la largeur. +1 pour Calvin du commentaire ci-dessus.
InformationsquelleAutor farooq

Après la lecture de Jean de la réponse, j'ai découvert la suite semblait fonctionner pour nous (ne nécessite pas de spécifier la largeur):

<style>
.row {
    float:left;
    border: 1px solid yellow;
    overflow: visible;
    white-space: nowrap;
}

.cell {
    display: inline-block;
    border: 1px solid red;
    height: 100px;
}
</style>

<div class="row">
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
    <div class="cell">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </div>
</div>

Cette correction d'un problème que j'ai avec déplaçable divs sur l'iphone. Lorsque les divs avait plus d'un mot en eux et ils ont été traînés à bord de l'écran de la div aurait enveloppe de sorte qu'il y avait un mot sur la ligne. De toute façon overflow: visible; white-space: nowrap; a Fait le tour pour moi. Merci!
Cela a fonctionné parce qu'il unfloated les cellules. Pas vraiment une solution pour garder la fait flotter les divs de s'enrouler

InformationsquelleAutor Kevin LeBlanc

La seule façon que j'ai réussi à le faire à l'aide overflow: visible; et width: 20000px; sur l'élément parent. Il n'y a aucun moyen de le faire avec du CSS niveau 1 que je suis au courant et j'ai refusé de penser que je devrais aller tous gung-ho avec CSS niveau 3. L'exemple ci-dessous a 18 menus qui s'étendent au-delà de ma résolution de 1920x1200 écran LCD, si votre écran est plus juste dupliquer le premier niveau des éléments de menu ou tout simplement redimensionner le navigateur. Sinon, et à une légère baisse des niveaux de compatibilité du navigateur vous pouvez utiliser CSS3 media queries.

Ici est une copie/coller de l'exemple de la démonstration...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML5 Menu Demonstration</title>
<style type="text/css">
* {border: 0; box-sizing: content-box; color: #f0f; font-size: 10px; margin: 0; padding: 0; transition-property: background-color, background-image, border, box-shadow, color, float, opacity, text-align, text-shadow; transition-duration: 0.5s; white-space: nowrap;}
a:link {color: #79b; text-decoration: none;}
a:visited {color: #579;}
a:focus, a:hover {color: #fff; text-decoration: underline;}
body {background-color: #444; overflow-x: hidden;}
body > header {background-color: #000; height: 64px; left: 0; position: absolute; right: 0; z-index: 2;}
body > header > nav {height: 32px; margin-left: 16px;}
body > header > nav a {font-size: 24px;}
main {border-color: transparent; border-style: solid; border-width: 64px 0 0; bottom: 0px; left: 0; overflow-x: hidden !important; overflow-y: auto; position: absolute; right: 0; top: 0; z-index: 1;}
main > * > * {background-color: #000;}
main > section {float: left; margin-top: 16px; width: 100%;}
nav[id='menu'] {overflow: visible; width: 20000px;}
nav[id='menu'] > ul {height: 32px;}
nav[id='menu'] > ul > li {float: left; width: 140px;}
nav[id='menu'] > ul > li > ul {background-color: rgba(0, 0, 0, 0.8); display: none; margin-left: -50px; width: 240px;}
nav[id='menu'] a {display: block; height: 32px; line-height: 32px; text-align: center; white-space: nowrap;}
nav[id='menu'] > ul {float: left; list-style:none;}
nav[id='menu'] ul li:hover ul {display: block;}
p, p *, span, span * {color: #fff;}
p {font-size: 20px; margin: 0 14px 0 14px; padding-bottom: 14px; text-indent: 1.5em;}
.hidden {display: none;}
.width_100 {width: 100%;}
</style>
</head>
<body>
<main>
<section style="height: 2000px;"><p>Hover the first menu at the top-left.</p></section>
</main>
<header>
<nav id="location"><a href="">Example</a><span> - </span><a href="">Blog</a><span> - </span><a href="">Browser Market Share</a></nav>
<nav id="menu">
<ul>
<li><a href="" tabindex="2">Menu 1 - Hover</a>
<ul>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
<li><a href="" tabindex="2">Menu 1 B</a></li>
</ul>
</li>
<li><a href="" tabindex="2">Menu 2</a></li>
<li><a href="" tabindex="2">Menu 3</a></li>
<li><a href="" tabindex="2">Menu 4</a></li>
<li><a href="" tabindex="2">Menu 5</a></li>
<li><a href="" tabindex="2">Menu 6</a></li>
<li><a href="" tabindex="2">Menu 7</a></li>
<li><a href="" tabindex="2">Menu 8</a></li>
<li><a href="" tabindex="2">Menu 9</a></li>
<li><a href="" tabindex="2">Menu 10</a></li>
<li><a href="" tabindex="2">Menu 11</a></li>
<li><a href="" tabindex="2">Menu 12</a></li>
<li><a href="" tabindex="2">Menu 13</a></li>
<li><a href="" tabindex="2">Menu 14</a></li>
<li><a href="" tabindex="2">Menu 15</a></li>
<li><a href="" tabindex="2">Menu 16</a></li>
<li><a href="" tabindex="2">Menu 17</a></li>
<li><a href="" tabindex="2">Menu 18</a></li>
</ul>
</nav>
</header>
</body>
</html>

Lorsque j'utilise le upvoted réponse pour la remplacer width:100% avec width:1000px il fonctionne pour moi
J'ai utilisé 20K de pixels pour une raison quelconque, avec des écrans 4K à venir, vous savez qu'il y aura éventuellement être 8K et ainsi de suite, donc préférable de travailler avec un incroyablement grand nombre à continuer travailler pour ces années supplémentaires jusqu'à ce que les écrans sont de plus haute résolution que la vie elle-même. 😉
Compris... je suis juste heureux que je l'ai eu à arrêter l'emballage. Les feuilles de style CSS il me pousse des noix même avec les outils F12. Je ne sais pas comment quelqu'un pouvait rien faire sans eux.
Pour une référence future: à l'aide d'un énorme largeur/hauteur est extrêmement inefficace, parce que le navigateur stocke toujours une inutiles grosse boîte en mémoire. Placer le récipient à white-space: nowrap; et les enfants à display: inline-block; comme déjà dit dans d'autres réponses (ou revenir à display: table; et display: table-cell;).
main > * > * {background-color: #000;} O_o

InformationsquelleAutor John

0

Pour moi (à l'aide de bootstrap), seule chose qui a fonctionné a été mise en display:absolute;z-index:1 sur le dernier cellule.
- display:absolute n'est pas valide CSS
- Néanmoins, il a travaillé :p
InformationsquelleAutor Spikolynn
-1

J'ai eu un peu le même problème où une zone délimitée se composait d'une image en float:left bloc et non-float bloc de texte. La région a un liquide de largeur. Le texte, de par sa conception, d'envelopper le long du côté droit de l'image. Le problème était, le texte a commencé avec un <h2> tag, le premier mot qui est le petit mot "De." Comme je l'ai redimensionné la fenêtre d'une largeur plus petite, la non-flotté texte, pour une certaine gamme de largeurs, de ne laisser que le mot "De" au sommet de l'enveloppe de la zone, le reste du texte n'a été pressé en dessous du flotteur bloc. Ma solution a été de faire le premier mot de la balise de plus, en remplaçant l'espace qui l'ont suivie, avec ce code, <span style="opacity:0;">x</span> . L'effet était de faire le premier mot, au lieu de "de", "FromxNextWord", où "x", d'être invisible, ressemblait à un espace. Maintenant, mon premier mot était assez grand pour ne pas être abandonné par le reste du bloc de texte.

InformationsquelleAutor Jim

Vous devez vous connecter pour publier un commentaire.