Hay dos métodos para crear elementos «div» igualmente espaciados usando CSS.
Método 1: Usar la técnica Flexbox en CSS
Enfoque: podemos hacer un contenedor y luego establecer la propiedad de visualización en flex . Crea un Flexbox. Ahora podemos aplicar propiedades de flexbox a los elementos del contenedor. Por lo tanto, estableceremos la propiedad de justificar el contenido en el espacio intermedio para crear elementos «div» de igual tamaño.
Sintaxis:
.container {
display: flex;
justify-content: space-between;
}
Ejemplo 1: El siguiente código ilustra el concepto anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
#container {
width: 98vw;
height: 100vh;
border: 2px solid black;
/*Making the container a flexbox*/
display: flex;
/*Making equal spaced divs*/
justify-content: space-between;
background-color: black;
}
.box {
width: 20%;
height: 25%;
background-color: red;
color: white;
font-size: 2rem;
border: 4px solid white;
}
</style>
</head>
<body>
<div id="container">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
<div class="box">Box4</div>
</div>
</body>
</html>
Producción:
Elementos div igualmente espaciados usando la propiedad flex
Método 2: usar la propiedad de cuadrícula en CSS
Enfoque: Primero configuramos la visualización del contenedor como cuadrícula . A continuación, utilice la propiedad gap de CSS para crear elementos «div» con espacios iguales.
Sintaxis:
.container {
display: grid;
gap: 1rem;
}
Ejemplo 2: El siguiente código ilustra el concepto anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
#container {
/* Using the grid property */
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
/* Making equal spaced divs */
gap: 1rem;
}
.box {
border: 4px solid black;
background-color: red;
height: 30vh;
}
</style>
</head>
<body>
<div id="container">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
<div class="box">Box4</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por shahbazalam75508 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA