web-dev-qa-db-fra.com

Arrêtez les divs flottants

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

J'ai cherché dans Stack et je n'ai pas trouvé de réponse satisfaisante à ce que je pense être une simple question de CSS.

Les cellules ont une largeur spécifiée. Cependant, je ne souhaite pas spécifier la largeur de la ligne, celle-ci doit automatiquement correspondre à la largeur de ses cellules enfants. 

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

Veuillez fournir votre réponse sous forme d'extrait de code fonctionnel, car j'ai déjà essayé de nombreuses solutions que j'ai déjà vues ailleurs (comme spécifier width: 100% et elles ne semblent pas fonctionner).

Je recherche une solution uniquement HTML/CSS, sans JavaScript.

.row {
  float: left;
  border: 1px solid yellow;
  width: 100%;
  overflow: auto;
}
.cell {
  float: left;
  border: 1px solid red;
  width: 200px;
  height: 100px;
}
<div class="row">
  <div class="cell">a</div>
  <div class="cell">b</div>
  <div class="cell">c</div>
</div>

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

htmlcss-floatwrap
78
Nicholas

La propriété CSS display: inline-block a é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/

Vous trouverez ci-dessous un exemple d'utilisation. Les éléments clés sont que l'élément row a white-space: nowrap et que les éléments cell ont 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

<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>
101
Calvin

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

30
farooq

Après avoir lu la réponse de John, j'ai découvert que ce qui suit semblait fonctionner pour nous (il n'était pas nécessaire 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>
3
Kevin LeBlanc

Le seul moyen que j'ai réussi à faire est d'utiliser overflow: visible; et width: 20000px; sur l'élément parent. Je ne suis au courant d'aucun moyen de le faire avec le niveau 1 de CSS et j'ai refusé de penser que je devrais me lancer dans le gung-ho avec le niveau 3 de CSS. L'exemple ci-dessous contient 18 menus qui s'étendent au-delà de ma résolution LCD 1920x1200 , si votre écran est plus grand, il vous suffit de dupliquer les éléments de menu du premier niveau ou de redimensionner le navigateur. Alternativement et avec des niveaux de compatibilité de navigateur légèrement inférieurs, vous pouvez utiliser les requêtes de média CSS3.

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

<?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>
0
John