Tengo una serie de párrafos con flotación. Cuando pongo el texto del párrafo, al no tener el mismo contenido el tamaño de las cajas aumenta o reduce en función del texto que hay. Me gustaría poder solucionar esto. Ya les he puesto height 'auto', pero creo que no es este parámetro el que debería darle.
Os pongo mi código a ver si podéis ayudarme.
Mil gracias
Código HTML:
<main> <article> <h1>Novedades</h1> <p> <span>FÚTBOL</span> Celebra los goles de tu equipo con nosotros. Nos encanta el fútbol. <img src="img/futbol1.jpg" alt="imagen"> </p> <p><span>PIDE TU CUBO</span> Cerveza fría sin levantarte de la mesa. No dejes que se te caliente. <img src="img/cerveza.jpg" alt="imagen"> </p> <p><span>ANIMACIÓN</span>Gracias a la situación de nuestra terraza no nos perdemos nada de lo que pasa por las calles de Fraga.<img src="img/animacioncalle.jpg" alt="imagen"> </p> <p><span>ACTIVIDADES</span> Primer express forma parte de la asociación Av. Aragón y son muchas las actividades que se hacen en el bar. <img src="img/cuentos.jpg" alt="imagen"> </p> </article> </main>
Código:
main {
background-image: url(../img/bg_express1.jpg); background-repeat: no-repeat;
width: 100%;
height: auto;
clear: both;
color: whitesmoke;
}
main h1 {
padding: 0.5em 3em;
text-align: center;
font-weight: 200;
}
main article {
text-align: center;
}
main article p {
width: 20%;
background-color: rgba(0,0,0,0.3);
color: whitesmoke;
text-align: justify;
font-family: serif;
padding: 0.5em 0.7em;
font-weight: 100;
display: inline-block;
height: 100%;
margin-bottom: 1.5em;
box-sizing: border-box;
}
main p span {
padding-bottom: 0.2em;
color: coral;
float: left;
font-family: 'Nunito', sans-serif;
font-size: 1em;
width: 100%;
}
main p img {
width: 100%;
margin-top: 0.5em;
}
