-
Tutorial HTML en una columna de Ajuste de línea
-
El Consorcio de la World Wide Web ha añadido soporte de varias columnas a la lista cada vez mayor de Propiedades de la hoja de estilo en cascada a partir de las recomendaciones de CSS3. Propiedades de las columnas en CSS se convierten bloques de texto en párrafos o listas de columnas envueltas. Se puede aplicar a las columnas de texto que contiene las imágenes, también. Utilice las propiedades de las columnas para definir el número de columnas, su ancho, el espacio entre columnas e incluso añadir líneas entre las columnas. Añadir prefijos de proveedores y retrocesos de JavaScript para hacer las columnas funcionan en todos los navegadores.Instrucciones
1 Busque el texto en el documento HTML en el que desea aplicar el estilo de varias columnas. Al aplicar la palabra de varias columnas se ajusta a las listas de bala, orientar a los padres la etiqueta "<ul>" que se envuelve alrededor de los "<li>" etiquetas. Para trozos de texto, debe aplicar el estilo a la etiqueta que contiene "<div>" o "<sección>".
2 Añadir una clase o atributo ID de la etiqueta HTML, dependiendo de sus necesidades. Las clases y los identificadores permiten seleccionar las etiquetas de nombre en código CSS. Puede utilizar las clases en varias etiquetas, pero CSS requiere que cada atributo ID en un único archivo HTML es único. Por ejemplo, una etiqueta HTML que contiene tanto una clase y un atributo ID tiene el siguiente aspecto: <div class = "columnas MiClase" id = "intro"> Contenido aquí ... </ div>. Tenga en cuenta que puede especificar más de un nombre de clase de una etiqueta. No se puede hacer lo mismo para el atributo ID, sin embargo.
3 Abra el archivo CSS externo o añadir apertura y cierre "<style>" etiquetas "entre los <head>" etiquetas de su documento HTML. Seleccione la etiqueta HTML y, a continuación, establezca su propiedad "columna de contar" con el número de columnas deseadas. Por ejemplo, usar un código como el siguiente:
.Columns #intro {
la columna de recuento: 4;
}
Use un punto por delante de cualquier nombres de las clases y el uso de una almohadilla delante de los nombres de identificación. También puede seleccionar por el propio nombre de la etiqueta, sin el uso de cualquier símbolo de prefijo.
4 Establecer las propiedades de la columna "ancho" "columna-gap" y a los valores deseados. También puede establecer "la columna en reglas" para crear líneas entre las columnas. Use "la columna en reglas", como lo haría con la propiedad CSS "frontera". En este ejemplo se da formato a todos los "<sección>" etiquetas usar dos columnas con una regla de gris entre ellos:
sección {
la columna de recuento: 2;
la columna de diferencia: 20px;
columna en reglas: #bbb sólido 1px;
}
5 Duplicar sus propiedades CSS relacionados de columna y, a continuación añadir prefijos de proveedores para ellos. En mayo de 2011, debe agregar prefijos para Mozilla y navegadores basados en WebKit. Este ejemplo muestra los dos prefijos de proveedores que debe utilizar:
sección {
la columna de recuento: 2;
-webkit-columna-count: 2;
-moz-column-count: 2;
}
Consejos y advertencias
- Abstenerse de utilizar el "column-width" propiedad siempre que sea posible. Permitir a los navegadores para calcular las anchuras de forma automática para evitar dolores de cabeza y dar cuenta de las diferencias de renderizado del navegador difíciles.
- Internet Explorer 9 y por debajo de las columnas no son compatibles con CSS. Añadir un repliegue JavaScript para hacer columnas funcionan en los navegadores de Internet Explorer.
