Pregunta Detener flotante divs de envoltura


Quiero tener una fila de divs (celdas) que no se envuelven si el navegador es demasiado estrecho para ajustarse a ellos.

He buscado Stack, y no he podido encontrar una respuesta funcional a lo que creo que debería ser una simple pregunta css.

Las celdas tienen ancho especificado. Sin embargo, no quiero especificar el ancho de la fila, el ancho debe ser automáticamente el ancho de sus celdas hijo.

Si la ventana gráfica es demasiado estrecha para acomodar las filas, entonces el div debería desbordarse con barras de desplazamiento.

Proporcione su respuesta como fragmento de código que funciona, ya que he probado muchas de las soluciones que he visto en otros lugares (como especificar ancho: 100% y parece que no funcionan).

Estoy buscando una solución HTML / CSS única, sin 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>

Por el momento estoy realmente codificando el ancho de la fila a un número realmente grande.


75
2018-04-11 02:56


origen


Respuestas:


La propiedad CSS display: inline-block fue diseñado para abordar esta necesidad. Puedes leer un poco sobre esto aquí: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

A continuación se muestra un ejemplo de su uso. Los elementos clave son que el row elemento tiene white-space: nowrap y el cell elementos tienen display: inline-block. Este ejemplo debería funcionar en la mayoría de los principales navegadores; una tabla de compatibilidad está disponible aquí: 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>

99
2018-06-13 01:11



Quieres definir min-width en la fila, por lo que cuando se vuelve a clasificar según el tamaño del navegador, no baja debajo de eso y se ajusta.


28
2017-07-09 22:29



Después de leer la respuesta de John, descubrí que lo siguiente parecía funcionar para nosotros (no requería especificar el ancho):

<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
2017-10-31 14:58



La única forma en que logré hacer esto es usando overflow: visible; y width: 20000px; en el elemento padre No hay forma de hacer esto con el nivel 1 de CSS que yo conozca y me negué a pensar que tendría que usar todo el gung-ho con CSS nivel 3. El siguiente ejemplo tiene 18 menús que se extienden más allá de mi LCD de resolución de 1920x1200 , si su pantalla es más grande simplemente duplique los elementos del menú de primer nivel o simplemente cambie el tamaño del navegador. De forma alternativa y con niveles ligeramente más bajos de compatibilidad con el navegador, puede utilizar las consultas de medios de CSS3.

Aquí hay una demostración de ejemplo de copia / pegado completo ...

<?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
2017-09-20 17:55



Para mí (usando bootstrap), lo único que funcionaba era establecer display:absolute;z-index:1 sobre el último celda.


0
2018-02-01 19:24



Tuve un problema similar en el que un área delimitada consistía en una imagen en un flotante: bloque izquierdo y bloque de texto no flotante. El área tiene un ancho fluido. El texto, por diseño, terminaría en el lado derecho de la imagen. El problema fue que el texto comenzó con una etiqueta <h2>, la primera palabra es la pequeña palabra "De". A medida que cambiaba el tamaño de la ventana a un ancho menor, el texto no flotante, para un cierto rango de anchos, dejaba solo la palabra "De" en la parte superior del área de ajuste, el resto del texto se comprimía debajo del flotador bloquear. Mi solución fue agrandar la primera palabra de la etiqueta, reemplazando el espacio que la seguía con este código, <span style = "opacity: 0;"> x </ span>. El efecto fue hacer la primera palabra, en lugar de "De", "FromxNextWord", donde la "x", al ser invisible, parecía un espacio. Ahora mi primera palabra fue lo suficientemente grande como para no ser abandonada por el resto del bloque de texto.


-1
2018-05-11 00:06