Métodos comúnmente utilizados para el diseño CSS: float:none|left|right
Valor:
ninguno:?Valor predeterminado. El objeto no flota
izquierda: el texto fluye a la derecha del objeto
derecha: el texto fluye a la izquierda del objeto
Cómo funciona, vea un ejemplo de una fila y dos columnas.
código xhtml:
| El siguiente es el contenido citado: <div id="envoltura"> <div id="column1">Esta es la primera columna</div> <div id="column2">Esta es la segunda columna</div> <div class="clear"></div> /*Esto va en contra de la intención del estándar web, solo significa que los elementos debajo deben borrarse*/ </div> |
Código CSS:
| El siguiente es el contenido citado: #wrap{ancho:100;alto:auto;} #columna1{flotador:izquierda;ancho:40;} #columna2{flotador:derecha;ancho:60;} .clear{claro:ambos;} |
posición:estática|absoluta|fija|relativa
Valor:
estático:?Valor predeterminado. Sin posicionamiento especial, el objeto sigue las reglas de posicionamiento HTML.
Absoluto: arrastre el objeto fuera del flujo del documento y use atributos izquierdo, derecho, superior, inferior y otros para realizar un posicionamiento absoluto en relación con su objeto principal más cercano con la mayor configuración de posicionamiento. Si no existe dicho objeto principal, se utiliza el objeto del cuerpo. Y su cascada se define a través del atributo z-index.
fijo:?No es compatible. El posicionamiento de objetos sigue el método absoluto. Pero hay algunas reglas a seguir.
relativo:? Los objetos no se pueden apilar, pero se desplazarán en el flujo normal del documento según los atributos izquierdo, derecho, superior, inferior y otros.
Implementa el ejemplo de una fila y dos columnas.
código xhtml:
| El siguiente es el contenido citado: <div id="envoltura"> <div id="column1">Esta es la primera columna</div> <div id="column2">Esta es la segunda columna</div> </div> |