1

Muy buenas,

Estoy buscando que una serie de contendores no salten de linea cuando llegan al margen derecho de la pantalla. Me interesa que salga un scroll horizontal, de tal manera que cuando este scroll se desplace, poder ir viendo el contenido de la web.

El problema es que cuando por ejemplo 4 ocupan más que el ancho, el último salta de linea hacia bajo, y es algo que pretendo evitar. ¿Cómo podría lograrlo?

Muchas gracias de antemano

--Edit--

Un ejemplo del código

<div id="contenedor">
       <div class="contenido">Lorem Ipsum...</div>
       <div class="contenido">Lorem Ipsum...</div>
       <div class="contenido">Lorem Ipsum...</div>
       <div class="contenido">Lorem Ipsum...</div>
<(div>


y el css

#contenedor{
   display: block
}

.contenido{
   display: inline;
   width: 100%
}

2
  • Comparte el código que tienes para que podamos ayudarte mejor. Hay diferentes maneras de conseguirlo. Una que me parece fácil es usar flex-wrap: nowrap.
    – Miguel27
    Commented el 21 sept. 2022 a las 9:15
  • @Miguel27 he editado post con código de ejemplo para que sea más ilustrativo. Flex-wrap se usaría en el contenedor o en cada uno de los contenidos? Commented el 21 sept. 2022 a las 9:23

1 respuesta 1

1

La forma de hacerlo con flex sería algo como:

#contenedor {
        display:flex;
        flex-wrap: nowrap;
    }
    .contenido {
        min-width: 600px;
    }

Al contenedor padre le asignamos la propiedad flex y nowrap. Por otro lado hay que definir un width para cada contenedor hijo ya que si no la anchura máxima se ajusta por defecto al viewport.

Este enlace es una buena guía para entender el uso de flex y lo que se puede hacer.

1
  • Muchisimas gracias! Commented el 21 sept. 2022 a las 9:45

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.