html - pure - scroll horizontal y vertical css
Desplazamiento horizontal CSS (4)
Puede usar display:inline-block con white-space:nowrap . Escribe así:
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}
.imageDiv img {
box-shadow: 1px 1px 10px #999;
margin: 2px;
max-height: 50px;
cursor: pointer;
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1;/* For IE7*/
vertical-align:top;
}
Mira esto http://jsfiddle.net/YbrX3/
Intento crear un <div> con una serie de fotos que solo se pueden desplazar horizontalmente.
Debería verse algo así como este LINK ;
Sin embargo, lo anterior solo se logra especificando un ancho para el <div> que contiene las fotos (por lo tanto, no se ''ajusta la palabra''). Si no pongo un ancho, se ve así; LINK
¿Qué puedo hacer con CSS para evitar poner un ancho fijo ya que las imágenes pueden variar?
Gracias
Use este código para generar contenido de bloques de desplazamiento horizontal. Obtuve esto desde aquí http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html
<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {
overflow: scroll;
width:100%;
}
#outer_wrapper #inner_wrapper {
width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
width: 250px;
height:300px;
float: left;
margin: 0 4px 0 0;
border:1px grey solid;
}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<div class="box">
<!-- Add desired content here -->
HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript
</div>
<!-- more boxes here -->
</div>
</div>
</body>
</html>
intenta usar la estructura de la tabla, es más compatible con la parte posterior. Mira esto Desplazamiento horizontal usando tablas
revisa este enlace aquí cambio la pantalla: inline-block http://cssdesk.com/gUGBH