CSS, Desplazamiento "Float" y Práctica
En la clase de hoy de Lenguaje de Marcas hemos continuado con la parte de CSS dedicada a la maquetación, específicamente al Desplazamiento o denominado como "Float". Si queremos alinear por ejemplo dos párrafos, uno a la derecha y otro a la izquierda. Hemos aplicado el "display: inline-block", reduciendo el tamaño con "width" para poder posicionarlos uno al lado del otro. A continuación, usando los "float", se han posicionado a cada lado. El problema es que, los dos párrafos son elementos flotantes y, al añadir un tercer párrafo, este se posiciona en el medio. Se ha utilizado un "overflow-y: auto" para cuando el contenido de una caja es mayor que la altura de la caja, se sobresale de la caja, podamos ajustarlo. Utilizamos el "clear" para que se tenga en cuenta los flotantes para que el tercer párrafo se posicione en el lugar correspondiente con respecto a los otros dos, en este caso se posiciona debajo de los otros.
Hemos abierto otro ejercicio de ejemplo hecho para visualizar como quedarían aplicadas estas reglas de CSS con los elementos de HTML en una página web.
No hay comentarios:
Publicar un comentario