Tecnología

Inicio

Cómo hacer que las cosas enlosable en CSS

Los flotadores pueden baldosas elementos HTML de la página Web. Un flotador es una propiedad en Cascading Style Sheets que toma un valor o "izquierda" "derecho". Cuando se agrega "float: left" para cada imagen en una página web, por ejemplo, cada imagen flote hacia arriba contra el lado izquierdo de la última imagen, la creación de un formato de estilo galería. La agrupación de estas etiquetas en un solo div le permite controlar el ancho de la sección de azulejos. Cuando azulejos queda sin espacio a lo ancho del div, comienzan una nueva fila, de izquierda a derecha otra vez.

Instrucciones

1 Abra la página Web en un editor y agregar un nuevo div a la sección de la página donde desea agregar los azulejos:

<div id = "baldosas">

</ Div>

2 Añadir los elementos HTML que desea baldosas utilizando etiquetas HTML "

<div id = "baldosas">

<Img alt = "Primera imagen" />

<Img alt = "Segunda imagen" />

<Img alt = "tercera imagen" />

<Img alt = "Cuarto de imagen" />

<Img alt = "Quinta de imagen" />

</ Div>

El ejemplo crea cinco elementos HTML, todas ellas imágenes. También puede divs baldosas o elementos en una lista desordenada, dependiendo de sus necesidades.

3 Volver a los "<head>" etiquetas de su código HTML y buscar las "<style>" etiquetas. Añadir este código si no los encuentra:

<Style type = "text / css">

</ Style>

Todo el código CSS va entre estas etiquetas.

4 Escribe una regla de estilo que selecciona cada imagen dentro de un div con un nombre de ID especificado:

azulejos img {

}

Cambio "baldosas" para que coincida con el nombre de ID del div que ha creado. Al especificar un nombre de identificación en CSS, siempre prefijo del nombre con un símbolo de hash. Etiquetas no utilizan prefijos; cambiar el nombre de la etiqueta "img" al nombre de la etiqueta HTML que desea azulejo, tales como "Li" de elementos de la lista.

5 Establecer la propiedad "flotar" a la "izquierda" dentro de la regla de estilo que ha creado. Dé a cada imagen un tamaño, más los márgenes de separación. Al establecer los márgenes para los elementos de izquierda flotaban, establecidos márgenes derecho e inferior para obtener los mejores resultados:

azulejos img {

flotador izquierdo;

Anchura: 200px;

margin-right: 10px;

margin-bottom: 20px;

}

Este código se establecerá el ancho de cada imagen de la izquierda a reflotación y darle 10 píxeles de espacio en cada margen derecha y 20 píxeles de espacio en cada margen inferior. Al configurar solamente el ancho, el navegador va a escalar la altura a la anchura de las imágenes.

Consejos y advertencias

  • Cuando se trata de hacer que los elementos de lista enlosables en CSS, añadir "display: block;" a la regla de estilo. De lo contrario, los márgenes no funcionarán en elementos "li".