Una sola fila y columna
Aquí hay una cita:
cuerpo { margen: 0px; relleno: 0px; alineación de texto: centro }
#content {margen-izquierda:auto; margen-derecha:auto; ancho: 400px; ancho: 370px;
Dos filas y una columna
Aquí hay una cita:
cuerpo {margen: 0px; relleno: 0px; alineación de texto: centro;}
#content-top { margen-izquierda:auto; margen-derecha:auto; ancho: 400px; ancho: 370px;}
#content-end {margen-izquierda:auto; margen-derecha:auto; ancho: 400px ancho: 370px;}
Tres filas y una columna
Aquí hay una cita:
cuerpo { margen: 0px; relleno: 0px; alineación de texto: centro }
#content-top {margen-izquierda:auto; margen-derecha:auto; ancho: 400px; ancho: 370px;
#content-mid { margen-izquierda:auto; margen-derecha:auto; ancho: 400px; ancho: 370px;
#content-end {margen-izquierda:auto; margen-derecha:auto; ancho: 400px; ancho: 370px;
Una sola fila y dos columnas
Aquí hay una cita:
#bodycenter { ancho: 700px; margen derecho: automático; margen izquierdo: automático; desbordamiento: automático }
#bodycenter #dv1 {flotante: izquierda; ancho: 280px;}
#bodycenter #dv2 {flotador: derecha;ancho: 410px;}
Dos filas y dos columnas
Aquí hay una cita:
#encabezado{ ancho: 700px; margen derecho: automático; margen izquierdo: automático; desbordamiento: automático;}
#bodycenter {ancho: 700px; margen derecho: automático; margen izquierdo: automático;
#bodycenter #dv1 {float: izquierda; ancho: 280px;}
#bodycenter #dv2 { float: derecha;ancho: 410px;}
Tres filas y dos columnas.
Aquí hay una cita:
#encabezado{ ancho: 700px; margen derecho: automático; margen izquierdo: automático }
#bodycenter {ancho: 700px; margen derecho: automático; margen izquierdo: automático;
#bodycenter #dv1 { float: izquierda;ancho: 280px;}
#bodycenter #dv2 { float: derecha; ancho: 410px;}
#pie de página {ancho: 700 px; margen derecho: automático; margen izquierdo: automático;
Una fila y tres columnas.
posicionamiento absoluto
Aquí hay una cita:
#izquierda { posición: absoluta; arriba: 0px; izquierda: 0px ancho: 120px;
#medio {margen: 20px 190px 20px 190px }
#derecha {posición: absoluta; arriba: 0px; derecha: 0px ancho: 120px;}
posicionamiento del flotador uno
xhtml:
Aquí hay una cita:
<div id="deformación">
<div id="columna">
<div id="column1">Esta es la primera columna</div>
<div id="column2">Esta es la segunda columna</div>
<div class="claro"></div>
</div>
<div id="column3">Esta es la tercera columna</div>
<div class="claro"></div>
</div>
CSS:
Aquí hay una cita:
#wrap{ ancho:100%; alto:auto;}
#columna{ float:izquierda; ancho:60%;}
#columna1{ flotador:izquierda; ancho:30%;}
#columna2{ flotador:derecha; ancho:30%;}
#columna3{ flotador:derecha; ancho:40%;}
.clear{ claro:ambos;}
posicionamiento del flotador dos
xhtml:
Aquí hay una cita:
<div id="centro" clase="columna">
<h1>Este es el contenido principal.</h1>
</div>
<div id="izquierda" clase="columna">
<h2>Esta es la barra lateral izquierda.</h2>
</div>
<div id="derecha" clase="columna">
<h2>Esta es la barra lateral derecha.</h2>
</div>
CSS:
Aquí hay una cita:
cuerpo {margen: 0;relleno-izquierda: 200px;relleno-derecha: 190px;ancho mínimo: 240px;}
.columna {posición: relativa; flotador: izquierda;}
#centro {ancho: 100%;}
#izquierda {ancho: 180 px; derecha: 240 px; margen izquierdo: -100%;}
#right {ancho: 130px;margen-derecho: -100%;}
Dos filas y tres columnas
xhtml:
Aquí hay una cita:
<div id="header">Aquí está la fila superior</div>
<div id="deformación">
<div id="columna">
<div id="column1">Esta es la primera columna</div>
<div id="column2">Esta es la segunda columna</div>
<div class="claro"></div>
</div>
<div id="column3">Esta es la tercera columna</div>
<div class="claro"></div>
</div>
CSS:
Aquí hay una cita:
#encabezado{ancho:100%; alto:automático;}
#wrap{ ancho:100%; alto:auto;}
#columna{ float:izquierda; ancho:60%;}
#columna1{ flotador:izquierda; ancho:30%;}
#columna2{ flotador:derecha; ancho:30%;}
#columna3{ flotador:derecha; ancho:40%;}
.clear{ claro:ambos;}
Tres filas y tres columnas.
xhtml:
Aquí hay una cita:
<div id="header">Aquí está la fila superior</div>
<div id="deformación">
<div id="columna">
<div id="column1">Esta es la primera columna</div>
<div id="column2">Esta es la segunda columna</div>
<div class="claro"></div>
</div>
<div id="column3">Esta es la tercera columna</div>
<div class="claro"></div>
</div>
<div id="footer">Esta es la fila inferior</div>
CSS:
Aquí hay una cita:
#encabezado{ancho:100%; alto:automático;}
#wrap{ ancho:100%; alto:auto;}
#columna{ float:izquierda; ancho:60%;}
#columna1{ flotador:izquierda; ancho:30%;}
#columna2{ flotador:derecha; ancho:30%;}
#columna3{ flotador:derecha; ancho:40%;}
.clear{ claro:ambos;}
#pie de página{ancho:100%; alto:automático;}
PD: Los ejemplos enumerados aquí son ejemplos de uso común, no para fines de investigación. Para cada cuadro, no se establecen márgenes, relleno, boeder y otros atributos.