HTML Elemento div
El elemento <div> se utiliza como contenedor para otros elementos HTML.
El elemento <div>
El elemento <div> es por defecto un elemento de bloque, lo que significa que toma todo el ancho disponible y viene con saltos de línea antes y después.
Ejemplo
Un elemento <div> ocupa todo el ancho disponible:
Lorem Ipsum <div>I am a div</div> dolor sit amet.
Resultado
Inténtalo tú mismo »
El elemento <div> no tiene atributos obligatorios, pero style, class y id son comunes.
<div> como contenedor
El elemento <div> se utiliza a menudo para agrupar secciones de una página web.
Ejemplo
Un elemento <div> con elementos HTML:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
Resultado
London
London is the capital city of England.
London has over 13 million inhabitants.
Inténtalo tú mismo »
Alinear al centro un elemento <div>
Si tiene un elemento <div> que no es 100% ancho y desea alinearlo al centro, configure el CSS propiedad de margin para auto.
Ejemplo
<style>
div {
width:300px;
margin:auto;
}
</style>
Resultado
London
London is the capital city of England.
London has over 13 million inhabitants.
Inténtalo tú mismo »
Múltiples elementos <div>
Puedes tener muchos contenedores <div> en la misma página.
Ejemplo
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
Resultado
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Inténtalo tú mismo »
Alinear elementos <div> uno al lado del otro
Al crear páginas web, a menudo desea tener dos o más elementos <div> uno al lado del otro, como este:
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Existen diferentes métodos para alinear elementos uno al lado del otro, todos incluyen algo de estilo CSS. Veremos los métodos más comunes:
Float
La propiedad CSS float no estaba originalmente destinada a alinear elementos <div> uno al lado del otro, pero tiene Se ha utilizado para este propósito durante muchos años.
La propiedad CSS float se utiliza para posicionar y dar formato al contenido y permite que los elementos floten uno al lado del otro en lugar de uno encima del otro.
Ejemplo
Cómo usar float para alinear elementos div uno al lado del otro:
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
Resultado
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Inténtalo tú mismo »
Obtenga más información sobre el flotador en nuestro tutorial CSS float.
Inline-block
Si cambia la propiedad display del elemento <div> del block a inline-block, los elementos <div> ya no agregarán un salto de línea antes y después, y se mostrarán uno al lado del otro en lugar de uno encima del otro.
Ejemplo
Cómo usar display: inline-block para alinear elementos div uno al lado del otro:
<style>
div {
width: 30%;
display: inline-block;
}
</style>
Resultado
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Inténtalo tú mismo »
Flex
El módulo de diseño CSS Flexbox se introdujo para facilitar el diseño de una estructura de diseño flexible y responsiva sin utilizar flotación ni posicionamiento.
Para que el método CSS flex funcione, rodee los elementos <div> con otro elemento <div> y proporcione Tiene el estado de contenedor flexible.
Ejemplo
Cómo usar flex para alinear elementos div uno al lado del otro:
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
Resultado
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Inténtalo tú mismo »
Obtenga más información sobre flex en nuestro tutorial CSS flexbox.
Grid
El módulo CSS Grid Layout ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que utilizar elementos flotantes ni posicionamiento.
Suena casi igual que flex, pero puede definir más de una fila y posicionar cada fila individualmente.
El método de cuadrícula CSS requiere que rodee los elementos <div> con otro elemento <div> y proporcione el estado como contenedor de cuadrícula y debe especificar el ancho de cada columna.
Ejemplo
Cómo utilizar la cuadrícula para alinear elementos <div> uno al lado del otro:
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
Resultado
London
London is the capital city of England.
London has over 13 million inhabitants.
Oslo
Oslo is the capital city of Norway.
Oslo has over 600.000 inhabitants.
Rome
Rome is the capital city of Italy.
Rome has almost 3 million inhabitants.
Inténtalo tú mismo »
Obtenga más información sobre la cuadrícula en nuestro tutorial de cuadrícula CSS.
Etiquetas HTML
| Etiqueta | Descripción |
|---|---|
| <div> | Definir una sección en un documento (en bloque) |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
