0

.card-background{
    background-color: #BEE9F2;
    height: 2000px;
}

.card img{
    height: 350px;
    width: 350px;
}

.container-card{
    width: 100%;
    max-width: 1200px;
    height: 430px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}

.card{
    width: 800px;
    height: 350px;
    border-radius: 8px;
    margin: 20px;
    text-align: left;
    transition: .5s;
    background-color: whitesmoke;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="style-nosotros.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="card-background">
        <div class="container-card">
            <div class="card">
                <img src="https://es.rankiapro.com/wp-content/uploads/2019/08/fondo-tecnologico-preferido-selectores.jpg" alt="1">
                <h4>Fundación</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat perferendis porro accusamus, qui reprehenderit necessitatibus soluta nostrum fuga alias amet quasi quidem animi officiis, iusto maxime magnam quibusdam aspernatur dicta!</p>
            </div>
        </div>
    </div>
</body>
</html>

Como hago que el texto aparezca dentro del rectángulo blanco, esto es lo que he intentado display:flex; flex-direction: row; solo que aquí el párrafo y el h4 salen pegados incluso con en html, también intente position: absolute; bottom: #; left:#; y quedo pero no creo que sea la forma mas optima ya que incluiré mas rectángulos como ese. Alguien conoce alguna regla de css con la que puede alinear y colocar el texto de una buena forma, todos mis rectangulos llevaran la class:card; para ahorrarme codigo

1 respuesta 1

0

Puedes simplemente añadirle un float: left
En este ejemplo igual he cambiado el ancho de la imagen a 50% para que se aprecie el cambio. De todos modos, no deberías usar anchos fijos para las cosas, dada la diferencia de tamaños en los dispositivos.

.card-background{
    background-color: #BEE9F2;
    height: 2000px;
}

.card img{
    height: 350px;
    width: 50%;
}

.container-card{
    width: 100%;
    max-width: 1200px;
    height: 430px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
}

.card{
    width: 800px;
    height: 350px;
    border-radius: 8px;
    margin: 20px;
    text-align: left;
    transition: .5s;
    background-color: whitesmoke;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="style-nosotros.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="card-background">
        <div class="container-card">
            <div class="card">
                <img style="float:left" src="https://es.rankiapro.com/wp-content/uploads/2019/08/fondo-tecnologico-preferido-selectores.jpg" alt="1">
                <h4>Fundación</h4>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat perferendis porro accusamus, qui reprehenderit necessitatibus soluta nostrum fuga alias amet quasi quidem animi officiis, iusto maxime magnam quibusdam aspernatur dicta!</p>
            </div>
        </div>
    </div>
</body>
</html>

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.