89 votes

Arrêtez les divs flottants

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.

<html>
<body>
<style>

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

.cell {
    float: left;
    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>

Pour le moment, je suis en train de coder en dur la largeur de la ligne à un grand nombre.

112voto

Calvin Points 911

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 que la row élément a white-space: nowrap et de la cell éléments 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>

33voto

farooq Points 619

Vous voulez définir min-width sur la ligne afin que, lorsque le navigateur est redimensionné, il ne descende pas en dessous et soit bouclé.

2voto

John Points 1413

La seule façon que j'ai réussi à faire cela est d'utiliser 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.

Voici un 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>

-1voto

Jim Points 37

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 tag <h2>, le premier mot qui est le petit mot"." 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.

-4voto

Aleadam Points 25433

float est conçu pour faire exactement ce que vous ne voulez pas. Utilisez plutôt le positionnement relatif .

Cela vous donnera une longueur d'avance:

http://www.alistapart.com/articles/flexiblelayouts/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X