Primero, haga clic aquí para ver el efecto de la operación real. Esta página puede estar centrada y ser altamente adaptable en los navegadores Mozilla, Opera e IE. Analicemos el código:
código completo
<html>
<cabeza>
<tipo de estilo="texto/css">
cuerpo{
fondo:#999;
alineación de texto:centro;
color: #333;
familia de fuentes:arial,verdana,sans-serif;
}
#encabezamiento{
ancho: 776 px;
margen derecho: automático;
margen izquierdo: automático;
relleno: 0px;
antecedentes: #EEE;
altura: 60 píxeles;
alineación de texto: izquierda;
} #contener{
margen derecho: automático;
margen izquierdo: automático;
ancho: 776px;
} #mainbg{
ancho: 776 px;
relleno: 0px;
antecedentes: #60A179;
flotador: izquierda;
}
#bien{
flotar: derecha;
margen: 2px 0px 2px 0px;
relleno: 0px;
ancho: 574px;
antecedentes: #ccd2de;
alineación de texto: izquierda;
}
#izquierda{
flotador: izquierda;
margen: 2px 2px 0px 0px;
relleno: 0px;
fondo: #F2F3F7;
ancho: 200px;
alineación de texto: izquierda;
}
#pie de página{
claro: ambos;
ancho: 776 px;
margen derecho: automático;
margen izquierdo: automático;
relleno: 0px;
antecedentes: #EEE;
altura: 60px;}
.text{margin:0px;padding:20px;}
</estilo>
</cabeza>
<cuerpo>
<div id="encabezado">encabezado</div>
<div id="contiene">
<div id="mainbg">
<div id="derecho">
<div
class="text">derecha<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div id="izquierda">
<div class="text">izquierda</div>
</div>
</div>
</div>
<div id="pie de página">pie de página</div>
</cuerpo>
</html>
A continuación, defina las dos columnas del medio #derecha y #izquierda. Para centrar las dos columnas del medio, anidamos una capa #contain fuera de ellas y configuramos margin:auto para contener, de modo que #right y #left estén centrados de forma natural;
Preste atención al orden de definición de las dos columnas del medio. Primero definimos #right y lo dejamos flotar en el lado derecho de la capa #contain a través de float: right;. Luego defina #left y déjelo flotar a la izquierda de la capa #right a través de float: left;. Esto es exactamente lo opuesto al orden en el que definimos la tabla de izquierda a derecha (Corrección: primero la izquierda, luego la derecha, o primero la derecha y luego la izquierda, puede diseñarla según sus propias necesidades).
Vemos que hay una capa #mainbg anidada entre #contain y las dos columnas del código. ¿Para qué se utiliza esta capa? Esta capa se utiliza para definir el fondo de #contain. Definitivamente preguntarás, ¿por qué no definir el fondo directamente en #contain, pero agregar otra capa? Esto se debe a que el fondo definido directamente en #contain no se mostrará en mozilla y se debe definir el valor de altura. Si se define un valor de altura, la capa #right no puede escalarse automáticamente según el contenido. Para resolver los problemas de fondo y altura, es necesario agregar dicha capa #mainbg. El truco consiste en definir float: left; para la capa #mainbh, porque float proporciona automáticamente los atributos de ancho y alto de la capa. (Entendámoslo así por el momento :)
Finalmente, define la capa #footer en la parte inferior. La clave de esta definición es: claro: ambos;. La función de esta oración es cancelar la herencia flotante de la capa #pie de página. De lo contrario, verá #pie de página junto a #encabezado en lugar de debajo de #derecha.
Una vez definidas las capas principales, el diseño está listo. Un punto adicional: viste que también definí un .text{margin:0px;padding:20px;}. La función de esta clase es crear un margen de 20px alrededor del contenido. ¿Por qué no definir el margen o el relleno directamente en #right? Debido a que Mozilla e IE tienen interpretaciones inconsistentes del modelo de cuadro CSS, definir directamente el margen/relleno provocará una deformación del diseño en Mozilla. Normalmente soluciono el problema poniendo otra capa dentro.