Problemas con Margin en CSS3

[manu_TE]

Buenas tardes!

Tengo un problema, que por más vueltas que le doy vueltas, no sé cómo solucionar, y es el siguiente:

Partimos de un contenedor principal del 100% , divido a su vez en dos contenedores de 70% de ancho el primera y de 30% el segundo…El problema está, en que si quiero meter por módulos de un % de ancho determinado en el contenedor del 70%, es decir debo poder introducir tantos módulos como el ancho me deje, pero tengo que controlar de algún modo a nivel de CSS el sistema de pares impares para dejar margin derecho entre un módulo y otro, y controlar cuando se llegue al máximo modulo permitido , que pueda contener el contenedor de 70% de ancho, para que en ese caso sea par o impar el número que haga no deje margin derecho.

Si alguno se os ocurre, o ha tenido un problema parecido y puede compartirlo, os estaría profundamente agradecido!

[ipraetoriux]

...pues lo primero que se me ocurre, es solución en Javascript. y/o jQuery...yo pondría un contenedor por cada fila de módulos, y con javascript y/o jquery verificaría la cantidad de childrens dentro de ese contenedor, si es par o impar, aplicaría estilos diferentes para sus childrens

Código HTML:

<div class="wrapper">
      <div class="inside-wrapper">
             <div class="modulo"></div>
             <div class="modulo"></div>
             <div class="modulo"></div>
      </div>
     <div class="inside-wrapper">
             <div class="modulo"></div>
             <div class="modulo"></div>
             <div class="modulo"></div>
      </div>
     <div class="inside-wrapper">
             <div class="modulo"></div>
             <div class="modulo"></div>
             <div class="modulo"></div>
      </div>
     <div class="inside-wrapper">
             <div class="modulo"></div>
             <div class="modulo"></div>
             <div class="modulo"></div>
      </div>
</div>
 

[pzin]

Usar JavaScript para eso me parece innecesario.

Puedes usar nth-child():

Código HTML:

<article>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>
 

Código CSS:

div:nth-child(odd) {
  // Estilos para divs impares
}
 
div:nth-child(even) {
  // Estilos para divs pares
}
 

También podrías crear reglas para cada tercer elemento y cosas así. Te dejo un pequeño artículo.

[manu_TE]

Gracias a los dos!

La opcion por la que deberia tirar es la segunda que proponeis, no puedo usar javascript ni framework alguno para solucionarlo, solo HTML5 y CSS3

[manu_TE]

Buenas,

La opcion que propone pzin, me serviría pero el problema ahora lo tengo en que no me funcionaria para IE8, IE7ya que nth-child es CSS3 y estos navegadores no lo contemplan...

[ipraetoriux]

...quien sigue usando IE7 ?....como desarrolladores hay que empezar a descartar esas opciones antiguas, si todavía existen usuarios y clientes que usan IE7, mucho es por culpa de los desarrolladores y diseñadores, que siguen pensando en estos navegadores, en cambio si limitamos el acceso a estas tecnologías antiguas, estos usuarios si o si tendrán que migrar a otro navegador, evolucionar, pero si seguimos dando pseudo soluciones para estos navegadores, esta historia será de nunca acabar...hoy me parece que hay que preocuparse mas como en como funciona tu web en navegadores mobiles que en IE7, me parece...

...con respecto a tu duda, ya lo dijo Sergey Mijaylovich Brin, "Javascript es tu angel protector.."

[pzin]

IE2 no soportaba CSS. Igual deberías de contemplar la posibilidad de construir la web sin CSS.

Yo recomiendo "ya" ni siquiera dar soporte a IE9. Ya toca divertirse un poco después de tanto tiempo arrastrando la lacra mal nacida esa de Microsoft.