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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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