En este articulo vamos a explicar como distribuir horizontalmente varios elementos dentro de un contenedor utilizando CSS.
Suponemos de querer 3 elementos distribuidos horizontalmente dentro de una capa contenedora.
<div id="contenedor"> <div class="seccion"></div> <div class="seccion"></div> <div class="seccion"></div> </div> Para distribuir los elementos "seccion", dentro de la capa contenedora, se podría pensar de aplicar unmargin-lefta la clase .seccion. En este caso pero, tendríamos el problema de la ultima capa a la derecha que no cabría dentro del contenedor. La solucion es utilizar el selector CSS :first-child para aplicar un estilo al primer elemento dentro de la capa contenedora "contenedor". Primero hay que definir un estilo a la capa contenedora: #contenedor { width: 640px; height: 300px; }
luego hay que aplicar un estilo a la clase “seccion” de los tres elementos:
.seccion{
float:left;
height:300px;
margin-left:10px;
width:200px;
}
y entonces podremos sobrescribir el estilo del primer elemento dentro de la capa
contenedora:#contenedor div:first-child{margin-left:0px;}Atención: IE6 no soporta este selector.
RSS
W3C
Información Bitacoras.com…
Valora en Bitacoras.com: En este articulo vamos a explicar como distribuir horizontalmente varios elementos dentro de un contenedor utilizando CSS. Suponemos de querer 3 elementos distribuidos horizontalmente dentro de una capa contenedora. Para dist…..
Hola!, excelente recurso!, y aqui un pequeño aporte, podemos hacer lo siguiente:
#contenedor { width: 640px; height: 300px; }
.seccion{ float:left; height:300px; width:200px; border:1px solid #CCCCCC;}
#contenedor .seccion + .seccion{ margin-left:10px;}
y con esto nos ya hacemos nuestro elementos distribuidos como queremos hasta en ie6
saludos!