Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Maquetación a tres columnas

Estas en el tema de Maquetación a tres columnas en el foro de CSS en Foros del Web. Hola, se trata de un sitio con un width de 960px pensado a tres columnas con diferentes artículos. Las columnas se generan automaticamente solo gracias ...
  #1 (permalink)  
Antiguo 27/08/2014, 20:35
 
Fecha de Ingreso: febrero-2013
Mensajes: 90
Antigüedad: 9 años, 11 meses
Puntos: 0
Maquetación a tres columnas

Hola, se trata de un sitio con un width de 960px pensado a tres columnas con diferentes artículos. Las columnas se generan automaticamente solo gracias a la anchura fijada para los artículos (30%) y a la etiqueta "float left". La idea era ponerles un margen derecho del 5% a los artículos de la primera y la segunda columna para generar los intercolumnados, pero no se como hacerlo para que este margen no afecte a la tercera columna (ya que los artículos han de tener la misma clase).

En resumen:

Código HTML:
<section id="articles_list">

    	<article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae ornare erat, vel convallis dui. Morbi in tempus massa. Proin in quam vestibulum, sollicitudin libero et, finibus dolor. 
                    </p>
        </article>
        
        <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae ornare erat, vel convallis dui.
                    </p>
        </article>
        
                <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae ornare erat, vel convallis dui.
        </article>
        
                <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae ornare erat, vel convallis dui.
                    </p>
        </article>
        
                <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Cras molestie consectetur odio in rhoncus. Sed faucibus convallis quam, at elementum neque pulvinar at. 
                    </p>
        </article>
        
                <article>
        	<img class="thumb" src="http://lorempixel.com/300/300/"/>
                    <p class="extract">Maecenas suscipit pulvinar ante nec faucibus. Cras molestie consectetur odio in rhoncus. Sed faucibus convallis quam, at elementum neque pulvinar at. 
                    </p>
        </article>
        
    </section> 
Código:
/*Articles_list*/

#main #articles_list {
	clear: both;
	width:100%;
}

#main #articles_list article {
	width:30%;
	margin-bottom:40px;
	margin-right:5%;
	padding-bottom:40px;
	border-bottom:1px solid #999999;
	overflow:hidden;
	float:left;
}
  #2 (permalink)  
Antiguo 27/08/2014, 21:05
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 20 años, 11 meses
Puntos: 998
Respuesta: Maquetación a tres columnas

usa :nth-child(3n)

Código CSS:
Ver original
  1. #articles_list article:nth-child(3n){
  2.     margin-right:0;
  3. }
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 29/08/2014, 03:13
 
Fecha de Ingreso: febrero-2013
Mensajes: 90
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Maquetación a tres columnas

Gracias! funciona bien, pero me da un problema en la versión responsive, al hacer pequeño el browser quiero que las 3 columnas se conviertan en 2. Columnas con width de 47% y margen del 6% a la derecha. Usando la misma propiedad funciona, pero hace algo raro, en la tercera imagen no deja margen.

Código:
@media screen and (max-width:720px){
		#main #articles_list article {
		width:47%;
		margin-right:6%;	
	}	

	#main #articles_list article:nth-child(2n){
	margin-right:0;
}
}
  #4 (permalink)  
Antiguo 29/08/2014, 03:34
 
Fecha de Ingreso: febrero-2013
Mensajes: 90
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Maquetación a tres columnas

No sé si sera correcta la solución, pero funciona, ¿que te parece?

Código:
@media screen and (max-width:720px){
	
	
#main #articles_list article:nth-child(3n){
	margin-right:6%;
}
	
	#main #articles_list article:nth-child(2n){
	margin-right:0;
}
		#main #articles_list article {
		width:47%;
		margin-right:6%;	
	}	

	
}
  #5 (permalink)  
Antiguo 29/08/2014, 03:57
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 20 años, 11 meses
Puntos: 998
Respuesta: Maquetación a tres columnas

una opción es esa y la otra (creo que más prolija) es quitarle el margen a la 3° columna también dentro de un @media para que no te lo herede y lo tengas luego que estar reescribiendo de nuevo
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #6 (permalink)  
Antiguo 31/08/2014, 02:35
 
Fecha de Ingreso: febrero-2013
Mensajes: 90
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Maquetación a tres columnas

Parece más lógico. Gracias!

Etiquetas: columnas, tres, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:30.