1

Agregué 3 imágenes y se creó un margen de espacio en blanco en la parte lateral derecha de la página, tal y como se ve en las siguientes capturas:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

¿Por qué ocurre eso y cómo puedo solucionarlo? Subo el código, aunque al ejecutarse aquí no muestre mucho:

.column {
  float: left;
  width: 33.33%;
  padding: 0;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

div .column-fisico2 {
  padding-left: 30px;
}
<div class="row">
  <div class="column column-fisico2">
    <img src="https://placehold.it/500x300/" alt="Snow" style="width:90%" height="91%">
  </div>
  <div class="column">
    <img src="https://placehold.it/500x300/" alt="Forest" style="width:90%" height="91%">
  </div>
  <div class="column columna-emocional1">
    <img src="https://placehold.it/500x300/" alt="Mountains" style="width:96.7%" height="91%">
  </div>
</div>

4
  • Puede ser solo impresión mia pero eso que indicas no es un scroll?
    – CristianS9
    Commented el 7 ago. 2018 a las 7:59
  • El error que se ve al ejecutar el código aquí es diferente al que muestras en las capturas de pantalla. Creo que faltan algunos estilos que están afectando al .row o .column para que sea un ejemplo mínimo verificable y se pueda ver el error claramente.
    – Alvaro Montoro
    Commented el 7 ago. 2018 a las 9:23
  • El código que subiste no reproduce lo mismo que la imagen que presentas. ¿Puedes subir el código completo? Commented el 8 ago. 2018 a las 15:46
  • @SergioACastañedaVenegas aun sigues teniendo problema?
    – zerokira
    Commented el 9 ago. 2018 a las 21:58

4 respuestas 4

2

La última imagen tiene "style="width:96.7%"" el margen de la derecha es ese 3,3% que falta. si lo necesitas, por que quieres que se haya un margen entre cada imagen, pero que la última llegue al final, puedes hacer como bootstrap, que usa un margen negativo en el row, y un padding igual en cada column:

.row{
  margin-right:-10px;
  margin-left:-10px

}
.column {
  float: left;
  width: 33.33%;
  padding: 0;
  padding-right:10px;
  padding-left:10px
}

es importante usar tb el box-sizing: border-box; para que el padding uncione correctamente en este caso, yo suelo añadirlo a todos los elementos por defecto:

* { box-sizing: border-box;}

te dejo un enlace para que lo veasen funcionamiento: https://jsfiddle.net/bajme7o1/10/

1

Como te han dicho ese margen se genera porque la última imagen al igual que las anteriores no ocupa el 100% del ancho del contenedor, para que no deje ese margen a su derecha puedes ponerle el 100% del ancho, y si quieres que haya espacio entre imágenes puedes darle padding-left a las imágenes. También te recomiendo usar el selector universal para evitar que los estilos por defecto de los navegadores te puedan dar problemas, eliminando el margen y el padding y usando la propiedad box-sizing como te han indicado anteriormente (además de esta forma evitarás tener que repetir código innecesariamente). Tu ejemplo tendría que parecerse más a esto:

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
img {
  width:100%;
  padding-left:20px;
  }

.column {
  float: left;
  width: 33.33%;
}
<div class="row">
  <div class="column column-fisico2">
    <img src="https://placehold.it/500x300/" alt="Snow">
  </div>
  <div class="column">
    <img src="https://placehold.it/500x300/" alt="Forest">
  </div>
  <div class="column columna-emocional1">
    <img src="https://placehold.it/500x300/" alt="Mountains">
  </div>
</div>

0

No entiendo muy bien porque agregas un a cada una de las etiquetas

style="width:90%"

Aun así, para que no se vea el borde de la imagen, únicamente debes de realizar lo siguiente.

.column {  
float: left; 
width: 33.33%;
padding: 0;
border:none;
}

0

Hola lo que yo hice fue lo siguiente usar display: flex;

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="row">
      <div class="column column-fisico2">
        <img src="https://placehold.it/500x300/" alt="Snow">
      </div>
      <div class="column">
        <img src="https://placehold.it/500x300/" alt="Forest">
      </div>
      <div class="column columna-emocional1">
        <img src="https://placehold.it/500x300/" alt="Mountains">
      </div>
    </div>
    </body>
  </html>

Entonces en css uso display: flex; le doy un ancho máximo al .row y a cada bloque le doy otro ancho para dividir en la pantalla y las imágenes las dejo al 100%. igual puedes jugar con los anchos de las imágenes dejarlos fijos en px y usar un flex-wrap: wrap; para que baje el elemento como float: left.

.row {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
}

.row .column {
  max-width: 280px;
}

.row .column img {
  max-width: 500px;
  width: 100%;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.