Etiqueta: clear

Sutil Web Fragmentos de código, Lenguajes de programación , , , , ,

Cajas de igual altura con float y clear

Vamos a establecer una altura fija para realizar nuestro ejercicio, veamos el código:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
* {
box-sizing: border-box;
}

.box {
float: left;
width: 50%;
padding:50px;
height: 300px;
}

.cleafix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>

<body>
<h2>Cajas de igual altura</h2>
<p>Haciendo flotar cajas de igual altura</p>
<div class="clearfix">
<div class="box"style="background-color: #bbb;">
<p>Texto 1</p>
</div>
<div class="box"style="background-color: #ccc">
<p>Texto 2</p>
<p>Texto 3</p>
<p>Texto 4</p>
</div>
</div>
</body>
</html>

El resultado es el siguiente

Sutil Web Fragmentos de código, Lenguajes de programación , , , , ,

Boxes (cajas) flotan una al lado de la otra

Os dejamos un ejm de 3 cajas flotando una al lado de la otra utilizando las propiedades float y clear.

El código sería el siguiente:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
.clearfix.::after {
content: "";
clear: both;
display: table;
}
</style>
</head>

<body>
<h2>Grid de cajas (Boxes)</h2>
<p>Cajas flotan una al lado de la otra</p>
<div class="clearfix">
<divclass="box"style="background-color:#bbb">
<p>Texto 1</p>
</div>
<divclass="box"style="background-color: #ccc;">
<p>Texto 2</p>
</div>
<divclass="box"style="background-color: #ddd;">
<p>Texto 3</p>
</div>
</div>

</body>
</html>

El resultado sería el siguiente: