Una etiqueta <div> se puede definir como un divisor de dos bloques de código HTML. Se utiliza como contenedor de elementos HTML que luego se pueden diseñar con CSS o Javascript. El atributo de clase o id se puede usar para diseñar fácilmente el elemento en la etiqueta <div>.
Lea más sobre la etiqueta <div> en este artículo: https://www.geeksforgeeks.org/div-tag-html/
Un ejemplo de cómo usar una etiqueta <div>:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.firstDiv {
border: 5px outset black;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<div class="firstDiv">
<h2>Hello Geek!</h2>
<p>How was your day like?</p>
</div>
</body>
</html>
Producción:
Cree un <div> que contenga varias imágenes de tamaño fijo:
Acercarse:
- Primero, cree la etiqueta <div> como se mencionó en el ejemplo anterior e inserte varias imágenes dentro de una etiqueta <div> común para que todas las imágenes tengan una etiqueta <div> separada y un nombre de clase.
- El siguiente ejemplo muestra cómo crear una etiqueta <div> que contenga varias imágenes de tamaño fijo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.images {
display: flex;
flex-wrap: wrap;
margin: 0 50px;
padding: 30px;
}
.photo {
max-width: 31.333%;
padding: 0 10px;
height: 240px;
}
.photo img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="images">
<div class="photo">
<img src="tom1.jpg" alt="photo" />
</div>
<div class="photo">
<img src="tom2.jpg" alt="photo" />
</div>
<div class="photo">
<img src="tom3.jpg" alt="photo" />
</div>
</div>
</body>
</html>
Explicación: en el código anterior, hemos creado un contenedor principal <div> clase de «imágenes» que se usa para almacenar todas las imágenes y cada imagen tiene su propio contenedor <div> clase de «foto» que se puede usar más adelante para agregue propiedades CSS especiales a las imágenes.
Las imágenes que se muestran están contenidas en la etiqueta <div> de class=”images”