Estoy tratando de conseguir una fila de divs con imágenes de fondo para desplazarse horizontalmente como un Netflix estilo de lista que he escrito esta:

http://jsfiddle.net/o3mxb4x9/

CSS:

.cover-container
{
    height: 180px;
    width: 100%;
    overflow-x: scroll;
}

.cover-item
{
    position: relative;
    float: left;
    margin: 8px 8px;
    box-shadow: 2px 2px 4px #bbb;
    border-top-right-radius: 4px;
    width: 116px;
    height: 158px;
    vertical-align: bottom;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
}

Pero no puedo conseguir que el desbordamiento de los horizontalmente y, por tanto, desplácese a la izquierda y a la derecha.

Estoy usando Bootstrap 3 para mi marco.

He tratado de hacer esto de otra pila de pregunta, pero no es trabajo para mí. (Bootstrap fila con desplazamiento horizontal)

1 Comentario

  1. 8

    La técnica funciona, pero tiene que hacerlo en su contenedor:

    .cover-container {
        height: 180px;
        width: 100%;
        white-space: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    Y, retire float a partir de sus elementos:

    .cover-item {
        display: inline-block;
        ...
    }

    De Trabajo Violín: http://jsfiddle.net/abhitalks/o3mxb4x9/1/

    .

Dejar respuesta

Please enter your comment!
Please enter your name here