0

Quiero que se vean nomás 3 cuadros por línea y se ven los 3 primeros inicial (bien) ya en la linea de abajo se ve uno y hay muchos más pero todos están debajo de ese y no entiendo como alinearlos:( introducir la descripción de la imagen aquí

.contenedor{
    display: inline-block;
    background: linear-gradient(18deg, rgba(117,123,255,1) 0%, rgba(109,145,254,1) 50%, rgba(129,209,255,1) 100%);
    height: 500vh;
    width: 100%;
    border: red 1px solid;
}
.contenido{
    display: inline-block;
    width: 370px;
    height: 400px;
    border: white solid 5px;
    border-radius: 15px;
    margin: 10px;
    padding: 10px;
    background-image: linear-gradient(to right bottom, rgba(0, 0, 255, 0.5) 20%, rgba(238, 130, 238, 0.5) 80%);
}

<body>
<div class="contenedor">
    <div class="contenido">
        <h1>XD (mafioso)</h1>
        <img id="XDMafioso" src="fotos/xd(mafia).png">
        <p>Fumador de Nicotina profresional, habilidad para bicicletear 98%, y -35 en visión de juego</p>
    </div>
    
    <div class="contenido">
        <h1>XD (normal)</h1>
        <img id="xdNormal" src="fotos/xd.jpeg">
        <p>Este también es xd, solo que esta versión no fuma, es saludable y tiene una relación estable</p>
    </div>

    <div class="contenido">
        <h1>XD (marushi)</h1>
        <img id="marushi" src="fotos/Marushi.jpeg">
        <p>Este es la combinación entre XD, y DX, tímido pero buena persona, es fanático de lo sensual</p>
    </div>

    <div class="contenido">
        <h1>XDXD</h1>
        <img id="xd" src="fotos/xda.png">
        <p>Animador profesional, xd en todas las redes sociales, tiene un queso impresionante, amante de barinas</p>
2
  • añade tu codigo html, seria de gran ayuda
    – Frnk
    el 17 may. 2022 a las 2:32
  • Puedes usar Flex box? Con eso se soluciona. el 17 may. 2022 a las 17:00

1 respuesta 1

0

Le recomiendo aprender grid css: https://www.w3schools.com/css/css_grid.asp, es muy fácil de entender y se pueden hacer cosas como estas de manera muy rápida y simple (ver resultado en página completa):

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
.contenedor{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: 30vh;
}
<div class="contenedor">
    
    <div class="contenido">
        <h1>XD (mafioso)</h1>
        <img id="XDMafioso" src="fotos/xd(mafia).png">
        <p>Fumador de Nicotina profresional, habilidad para bicicletear 98%, y -35 en visión de juego</p>
    </div>
    
    <div class="contenido">
        <h1>XD (normal)</h1>
        <img id="xdNormal" src="fotos/xd.jpeg">
        <p>Este también es xd, solo que esta versión no fuma, es saludable y tiene una relación estable</p>
    </div>
    
     <div class="contenido">
        <h1>XD (normal)</h1>
        <img id="xdNormal" src="fotos/xd.jpeg">
        <p>Este también es xd, solo que esta versión no fuma, es saludable y tiene una relación estable</p>
    </div>
    
     <div class="contenido">
        <h1>XD (normal)</h1>
        <img id="xdNormal" src="fotos/xd.jpeg">
        <p>Este también es xd, solo que esta versión no fuma, es saludable y tiene una relación estable</p>
    </div>

    <div class="contenido">
        <h1>XD (marushi)</h1>
        <img id="marushi" src="fotos/Marushi.jpeg">
        <p>Este es la combinación entre XD, y DX, tímido pero buena persona, es fanático de lo sensual</p>
    </div>

    <div class="contenido">
        <h1>XDXD</h1>
        <img id="xd" src="fotos/xda.png">
        <p>Animador profesional, xd en todas las redes sociales, tiene un queso impresionante, amante de barinas</p>
    </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.