¿Cómo hacer que los DIV flotantes dentro del DIV de ancho fijo continúen horizontalmente?
https://stackoverflow.com/questions/1015809
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo un contenedor DIV con una altura y ancho fijos (275x1000px). En este DIV, quiero colocar múltiples DIV flotantes, cada uno con un ancho de 300 px, y que aparezca una barra de desplazamiento horizontal (eje x) para permitir al usuario desplazarse hacia la izquierda y hacia la derecha para ver todo.
Este es mi CSS hasta ahora:
div#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
div#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
El problema es que los DIV flotantes no continuarán más allá del ancho del contenedor. Después de poner tres de los DIV flotantes, continuarán debajo. Si cambio overflow-y a auto, aparece la barra de desplazamiento vertical y puedo desplazarme hacia abajo.
¿Cómo puedo cambiar esto para que los DIV flotantes continúen sin pasar uno debajo del otro?
Solución
div#container {
height: 275px;
width: 1000px;
overflow: auto;
white-space: nowrap;
}
div#container span.block {
width: 300px;
display: inline-block;
}
El truco aquí es que solo los elementos que se comportan como en línea por defecto se comportarán correctamente cuando se configuran en bloque en línea en Internet Explorer, por lo que los contenedores internos deben ser < span > en lugar de < div > ;.
Otros consejos
Necesita un div extra con un ancho grande para contener los bloques, luego se extenderán más que el contenedor y no se desplegarán a una nueva línea.
El HTML:
<div id="container">
<div id="width">
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<div class="block">
<!-- contents of block -->
</div>
<!-- more blocks here -->
</div>
</div>
El CSS:
#container {
height: 275px;
width: 1000px;
overflow-x: auto;
overflow-y: hidden;
max-height: 275px;
}
#container #width {
width:2000px; /* make this the width you need for x number of blocks */
}
#container div.block {
float: left;
margin: 3px 90px 0 3px;
}
#row {
white-space: nowrap; /* important */
overflow: auto;
}
.items {
display: inline-block;
}<div id="row">
<div class="items">
<img src="//placehold.it/200/100" alt="item 1" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 2" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 3" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 4" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 5" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 6" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 7" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 8" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 9" />
</div>
<div class="items">
<img src="//placehold.it/200/100" alt="item 10" />
</div>
</div>
El truco aquí es el " espacio en blanco: nowrap " propiedad del padre que simplemente le dice a todos sus elementos hijos que continúen horizontalmente y la " display: inline-block " propiedad de sus hijos. No necesita agregar ninguna otra propiedad para que esto funcione.
JS Fiddle: http://jsfiddle.net/2c4jfetf/
Envuelve tus divs flotantes en otro div con el ancho más ancho.
<div style="width:230px;overflow-x:auto;background-color:#ccc;">
<div style="width:400px">
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
<div style="height:100px;width:100px;float:left;border:1px solid #000;"></div>
</div>
</div>
La solución de tabla debería funcionar muy bien.
Si no quieres usar tablas, también puedes poner todos los div .block en otro div dentro del #container y darle ese " in-between-div " un ancho fijo - calculado - usando javascript después de cargar la página.
Por supuesto, si ya sabe cuántos bloques tiene / si el número es fijo, puede dar " in-between-div " un ancho fijo usando css.
Parece que estás haciendo una galería con div?
¿Para qué estás usando exactamente los divs?
Puede ser más fácil usar un ul / li con tramos dentro del li para obtener el mismo efecto sin todos los dolores de cabeza de los divs flotantes.
Uso:
div#container {
overflow: auto;
}
O agregue un div de limpieza debajo de los tres div con el estilo:
{
clear: both
}
Ponga los divs que desea desplazar en una tabla así:
<div style='width:1000;border:2 solid red;overflow-x:auto'>
<table><tr>
<td><div style='width:300;height:200;border:1 solid black'>Cell 1 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 2 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 3 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 4 </div></td>
<td><div style='width:300;height:200;border:1 solid black'>Cell 5 </div></td>
</tr></table>
</div>
Editar: Intenté 3 de estas soluciones sugeridas, todas funcionan bien en Google Chrome, pero la primera (contenedor1) no funciona en IE (vaya a la figura), por lo que la solución SPAN obtiene mi voto :-):
<html>
<body>
<style>
div#container1
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container1 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container2
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container2 span.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
div#container3
{
height: 275px;
width: 100%;
overflow: auto;
white-space: nowrap;
border:2 solid red;
}
div#container3 div.block
{
width: 300px;
height: 200px;
display: inline-block;
border: 1 solid black;
}
</style>
<p>
<div id='container1'>
<div class='block'>Cell 1 </div>
<div class='block'>Cell 2 </div>
<div class='block'>Cell 3 </div>
<div class='block'>Cell 4 </div>
<div class='block'>Cell 5 </div>
</div>
<p>
<div id='container2'>
<span class='block'>Cell 1 </span>
<span class='block'>Cell 2 </span>
<span class='block'>Cell 3 </span>
<span class='block'>Cell 4 </span>
<span class='block'>Cell 5 </span>
</div>
<p>
<div id='container3'>
<table><tr>
<td><div class='block'>Cell 1 </div></td>
<td><div class='block'>Cell 2 </div></td>
<td><div class='block'>Cell 3 </div></td>
<td><div class='block'>Cell 4 </div></td>
<td><div class='block'>Cell 5 </div></td>
</tr></table>
</div>
</body>
</html>
Editar 2:
Ejecuté esta página de prueba a través de browsershots.org, para ver cómo lo manejan los diferentes navegadores. Conclusión: la compatibilidad del navegador apesta. :-)
http://browsershots.org/http : //dot-dash-dot.com/files/test_div2.htm
La solución de tabla funcionaba con más frecuencia, pero la opción de expansión (que es más limpia) solo se rompió en los navegadores de los que nunca había oído hablar. :-)
Mi ex:
div ancho: 850px vista en cuadrícula columna con plantilla ItemTemplate
<span class="buttonspanlt"></span><asp:Button ID="imgEditSave" runat="server" Text="Edit SubStatus" CssClass="buttoncenter" OnClick="imgEditSave_OnClick"/><span class="buttonspanrt"></span>
<span style="display:none;float:left;clear:left;" id="spangrdCancel" runat="server"><span class="buttonspanlt"></span><asp:Button ID="imgCancel" runat="server" Text="Cancel" class="buttoncenter"/><span class="buttonspanrt"></span></span>
end ItemTemplate Columna con plantilla final vista de cuadrícula final end div
el botón ha dejado en el centro (botón real) un tramo derecho que no flotaba ya que había div externo con ancho fijo.
Tuve que usar div adicional con un ancho de 140px fuera del botón, dentro de la plantilla del elemento y luego funcionó.
¡Espero que esto ayude!
Gracias Harish
