entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

¿Como igualo los bordes de imgs en un layout de 2 columnas?

bordes

Este es el CSS:

.foo{
    width: 100%;
    height: 100%;
    background: #999;
    padding-left: 2%;
    padding-top: 2%;
}
img{
    width: 47%;
    margin-top: 0;
    margin-bottom: 2%;
    margin-right: 2%;
    padding: 0;
}

y el html:

<div class="foo">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
</div>

http://jsfiddle.net/07Lwwmgb/

o talvez podrian darme otro enfoque para realizarlo.

2 Respuestas

3votos

jonatancastro1 Puntos3130

a mi me funciono bien asi:

body{
    margin: 0;
    padding: 0; 
}
.foo{
    float: left;
    width: 100%;
    height: 100%;
    background: #999;
    padding: 2% 2% 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
img{
    float: left;
    width: 49%;
    border: none;
    margin-right: 0%;
    margin-bottom: 2%;
}

img:nth-child(2n + 1){
    margin-right: 2%;
}

0voto

luisceladita comentado

Tengo una duda ¿Porque le pones el float al img? Parece que el img trae un margin bottom y left, es por eso?

0voto

jonatancastro1 comentado

Si, cuando no le agregas esa propiedad los navegadores generan un espacio que no corresponde a un margen si no a un retorno de carro, podrías quitar los float:left a img y a .foo si escribes el html asi:

<div class="foo">
    <img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""><img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""><img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt=""><img src="http://s29.postimg.org/z632s2x1z/shark.jpg" alt="">
</div>

Entonces ya no crearía esos espacios porque no hay retorno de carro entre etiquetas, o escribirlas todas seguido.

espero ser los suficientemente claro. Saludos

0voto

Peter Puntos150460

Como solución podrías hacer algo como esto:

.foo{
    width: 100%;
    height: 100%;
    background: #999;
    padding-bottom:2.4%;
}

img{
    width: 46%;
    margin-top:2.4%;
    margin-left: 2.4%;
    padding: 0;
}

Pero para sacarlo exacto, tienes que sacar los decimales en el porcentaje, por ejemplo 2.333333% y así ya te quedaría al milímetro si tomas en cuenta el margen del lado izquierdo, su porcentaje y lo que tiene que sobrar a la derecha para cumplir el 100%.

Saludos.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta