css - contenedor - ¿Cómo hacer que los DIV flotantes dentro del DIV de ancho fijo continúen horizontalmente?
hacer div responsive bootstrap (9)
Tengo un contenedor DIV con una altura y ancho fijos (275x1000px). En este DIV quiero poner varios DIV flotantes, cada uno con un ancho de 300px, y tener una barra de desplazamiento horizontal (eje x) que aparece 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 por debajo. Si cambio overflow-y a automático, aparece la barra de desplazamiento vertical y puedo desplazarme hacia abajo.
¿Cómo puedo cambiar esto para hacer que los DIV flotantes continúen sin pasar uno debajo del otro?
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 desea utilizar tablas, también puede colocar todos los divs .block en otro div dentro del #container y dar a ese "in-between-div" un ancho calculado fijo 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 darle un ancho fijo "in-between-div" usando css.
Mi ex:
div ancho: 850px gridview templatedcolumn 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 end templatedcolumn end gridview end div
el botón ha dejado el centro (el botón real) a la derecha, 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, luego funcionó.
¡¡¡Espero que esto ayude!!!
Gracias Harish
Necesitará un div adicional con un ancho grande para contener los bloques, luego se extenderán más que el div contenedor y no caerá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;
}
Parece que estás haciendo una galería con Div''s?
¿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.
Pon los divs que quieras desplazarte en una tabla como esta:
<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>
Edición: Intenté 3 de estas soluciones sugeridas, todas funcionan bien en Google Chrome, pero la primera (contenedor1) no funciona en IE (vaya 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 diferentes navegadores. Conclusión: la compatibilidad del navegador es una mierda. :-)
http://browsershots.org/http://dot-dash-dot.com/files/test_div2.htm
La solución de tabla funcionó más a menudo, pero la opción de extensión (que es más limpia) solo se rompió en navegadores de los que nunca había oído hablar. :-)
Utilizar:
div#container {
overflow: auto;
}
O agregue un div de compensación debajo de los tres divs con el estilo:
{
clear: both
}
#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 la propiedad "white-space: nowrap" del padre que simplemente le dice a todos sus elementos secundarios que continúen horizontalmente y la propiedad "display: inline-block" de sus hijos. No necesita agregar ninguna otra propiedad para que esto funcione.
JS Fiddle: http://jsfiddle.net/2c4jfetf/
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 configuren en bloque en línea en Internet Explorer, por lo que los contenedores internos deben ser <span> en lugar de <div>.