MEJOR SITIO PARA DESARROLLADORES WEB
HTML5 Lecciones para principiantes

Ua En De

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

Lorem Ipsum
I am a div
dolor sit amet.

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.



Comentarios