0

No se si se entienda, lo unico que necesito es que todos los divs esten uno al lado del otro, sin que ninguno se posicione por debajo del resto.

Tengo el Siguiente ejemplo:

div.linea {
    display: inline-block;
    margin: 20px;
    padding: 20px;
    border: 1px solid #4800ff;
    overflow-x: scroll;
}
 
div.linea > .itemlinea {
    display: inline-block;
    padding: 20px;
    background: #4800ff;
    color: #fff;
}
<div class="linea">
    <div class="itemlinea">Item 1</div>
    <div class="itemlinea">Item 2</div>
    <div class="itemlinea">Item 3</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>

</div>

Como veran el resultado despues de unos cuantos div estos se bajan, lo que deseo es que todos queden afilados en forma horizontal y yo lo recorrería con el scroll que tengo ahi.

Nota: utilizo bootstrap.

1 respuesta 1

5

Puedes utilizar la clase d-flex de Bootstrap para que todo se ubique en la misma fila; mientras no utilices la clase flex-wrap el contenido seguira expandiendose.

Con esto tambien puedes deshacerte de las reglas display: inline-block pues cada elemento dentro del contenedor principal se convierte en un flex-item.

Bootstrap 4 esta hecho completamente en Flexbox, puedes apoyarte de muchas utilidades y para saber mas de su comportamiento puedes leer esta documentacion: https://getbootstrap.com/docs/4.3/utilities/flex/

div.linea {
    margin: 20px;
    padding: 20px;
    border: 1px solid #4800ff;
    overflow-x: scroll;
}
 
div.linea > .itemlinea {
    padding: 20px;
    background: #4800ff;
    color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="linea d-flex">
    <div class="itemlinea">Item 1</div>
    <div class="itemlinea">Item 2</div>
    <div class="itemlinea">Item 3</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>
    <div class="itemlinea">Item 4</div>

</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.