html + css: carriles de desplazamiento horizontales?

Question

marcado muy simpel:

<div id="page-wrap"> 

    <div class="post horizontal"> 

     <h2>Headline 01</h2> 

     <div class="entry"> 
      <p>Lorem ipsum dolor...</p> 
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p> 
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p> 
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p> 
     </div> 
    </div> 

    <div class="post horizontal"> 

     <h2>Headline 02</h2> 

     <div class="entry"> 
      <p>Lorem ipsum dolor...</p> 
      <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p> 
      <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p> 
      <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p> 
     </div> 
    </div> 

</div> 

mi css se ve así:

.horizontal { 
    overflow-x:scroll; 
    clear:both; 
} 

.horizontal p { 
    float:left; 
    width:500px; 
    padding:0 20px 20px 0; 
} 

.horizontal p.image { 
    width:1024px; 
} 

no tengo ni idea de cómo puedo crear "marcos" horzizontal como la maqueta bajo sin el uso de marcos reales.

En este momento, las imágenes no flotan porque el contenido de .horizontal está al 100% dentro de # page-wrap. Entonces están alineados uno debajo del otro. Quiero que todas las imágenes estén una al lado de la otra dentro de .horizontal. Cada carril debe tener una barra de desplazamiento separada que me permita desplazarme por las imágenes.

quiero crear esto:

Cualquier idea de cómo resolver esto?

Además, tengo algunas cosas más que no sé cómo resolver ... p. Ej. las barras de desplazamiento o cada .horizontal solo deben aparecer si hay contenido real que tiene que ser desplazado (si no hay imágenes del scollbar no debería estar ahí)

gracias por su ayuda

por cierto. Estoy usando jquery en mi proyecto, ¿esto solo es posible con js?

Answer 1

Desde la maqueta que ha publicado, que se reúnen esta:

1. A pesar de que el margen de beneficio tiene cada imagen en su propio párrafo, que desea que se muestren en línea , dentro de la misma línea.

2. Desea que el contenedor tenga una barra de desplazamiento horizontal .

3. Las imágenes deben usar dicha barra de desplazamiento, por sin envolver en múltiples líneas cuando su ancho total crece por encima del ancho del contenedor.

Tal diseño puede ser implementado usando CSS como esto:

.horizontal p.image { 
    display: inline;   /* 1 */ 
} 

.entry { 
    overflow-x: scroll;  /* 2 */ 
    white-space: nowrap;  /* 3 */ 
} 

Aquí hay una demo usando el CSS anterior con su margen de beneficio (las limitaciones de anchura/altura en las imágenes se redujo a hacerlo visualizar mejor en una pequeña ventana): http://jsfiddle.net/TT9hq/

Reemplazar overflow-x: scroll con overflow-x: auto si la barra de desplazamiento es sólo para aparecer cuando hay (ancho) suficientes imágenes para requieren una barra de desplazamiento.

Answer 2

Primero, no envuelva sus imágenes en un p si quiere que todas estén en la misma línea, intente ponerlas en tramos. O bien, no los coloque en nada y configure el estilo display:inline en ellos. En cuanto a su problema de desplazamiento, acaba de establecer overflow-x: auto en ese contenedor div en lugar de overflow-x:scroll

EDIT: Si tiene que mantenerlos en p s, puesto display:inline en los p s.