Skip to main content
Se agrega imagen nuevamente como referencia junto al código
Origen Enlace
Jheyman Mejia
  • 3.9k
  • 3
  • 26
  • 53

al llevar las imágenes hacia la izquierda, la de la segunda posición se roba este espacio ¿Cómo.

¿Cómo puedo solucionarlo? Apenas estoy empezando mi mundo web. Este es mi HTML

`introducir la descripción de la imagen aquí

  <article class="entrada">
                     <h2>Viajar a londres</h2>
                     <img src="img/imagen_1.jpg" alt="Imagen viajar a Londres">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos imus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>
                 <article class="entrada">
                     <h2>Puente de la torre</h2>
                     <img src="img/imagen_1.jpg" alt="Imagen viajar a Puente de la torre">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis </p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos perferendis quo, possimus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>
                 <article class="entrada">
                     <h2>Metro de Londres</h2>
                     <img src="img/imagen_3.jpg" alt="Imagen Metro de Londres">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos peEsse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>

` ESTE ES MI CSS

  @media (min-width:480px) {
  .entrada img {
    width: 300px;
    float: left;
    /* lleva imagen hacia la izquierda*/
  }
<article class="entrada">
  <h2>Viajar a londres</h2>
  <img src="img/imagen_1.jpg" alt="Imagen viajar a Londres">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos imus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
  <a href="#" class="boton">Ler más </a>
</article>
<article class="entrada">
  <h2>Puente de la torre</h2>
  <img src="img/imagen_1.jpg" alt="Imagen viajar a Puente de la torre">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos perferendis quo, possimus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
  <a href="#" class="boton">Ler más </a>
</article>
<article class="entrada">
  <h2>Metro de Londres</h2>
  <img src="img/imagen_3.jpg" alt="Imagen Metro de Londres">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos peEsse adipisci odit molestias accusamus dolores.</p>
  <a href="#" class="boton">Ler más </a>
</article>
 @media (min-width:480px ){
    .entrada img{
        width: 300px;
        float: left; /* lleva imagen hacia la izquierda*/
    }
 

al llevar las imágenes hacia la izquierda, la de la segunda posición se roba este espacio ¿Cómo puedo solucionarlo? Apenas estoy empezando mi mundo web. Este es mi HTML

`

  <article class="entrada">
                     <h2>Viajar a londres</h2>
                     <img src="img/imagen_1.jpg" alt="Imagen viajar a Londres">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos imus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>
                 <article class="entrada">
                     <h2>Puente de la torre</h2>
                     <img src="img/imagen_1.jpg" alt="Imagen viajar a Puente de la torre">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis </p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos perferendis quo, possimus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>
                 <article class="entrada">
                     <h2>Metro de Londres</h2>
                     <img src="img/imagen_3.jpg" alt="Imagen Metro de Londres">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos peEsse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>

` ESTE ES MI CSS

 @media (min-width:480px ){
    .entrada img{
        width: 300px;
        float: left; /* lleva imagen hacia la izquierda*/
    }

al llevar las imágenes hacia la izquierda, la de la segunda posición se roba este espacio.

¿Cómo puedo solucionarlo?

introducir la descripción de la imagen aquí

  @media (min-width:480px) {
  .entrada img {
    width: 300px;
    float: left;
    /* lleva imagen hacia la izquierda*/
  }
<article class="entrada">
  <h2>Viajar a londres</h2>
  <img src="img/imagen_1.jpg" alt="Imagen viajar a Londres">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos imus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
  <a href="#" class="boton">Ler más </a>
</article>
<article class="entrada">
  <h2>Puente de la torre</h2>
  <img src="img/imagen_1.jpg" alt="Imagen viajar a Puente de la torre">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos perferendis quo, possimus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
  <a href="#" class="boton">Ler más </a>
</article>
<article class="entrada">
  <h2>Metro de Londres</h2>
  <img src="img/imagen_3.jpg" alt="Imagen Metro de Londres">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos peEsse adipisci odit molestias accusamus dolores.</p>
  <a href="#" class="boton">Ler más </a>
</article>
 

se añadieron 2100 caracteres en el cuerpo
Origen Enlace

al llevar las imágenes hacia la izquierda, la de la segunda posición se roba este espaciointroducir la descripción de la imagen aquí ¿Cómo puedo solucionarlo? Apenas estoy empezando mi mundo web. Este es mi HTML

`

  <article class="entrada">
                     <h2>Viajar a londres</h2>
                     <img src="img/imagen_1.jpg" alt="Imagen viajar a Londres">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos imus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>
                 <article class="entrada">
                     <h2>Puente de la torre</h2>
                     <img src="img/imagen_1.jpg" alt="Imagen viajar a Puente de la torre">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis </p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos perferendis quo, possimus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>
                 <article class="entrada">
                     <h2>Metro de Londres</h2>
                     <img src="img/imagen_3.jpg" alt="Imagen Metro de Londres">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos peEsse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>

` ESTE ES MI CSS

 @media (min-width:480px ){
    .entrada img{
        width: 300px;
        float: left; /* lleva imagen hacia la izquierda*/
    }

al llevar las imágenes hacia la izquierda, la de la segunda posición se roba este espaciointroducir la descripción de la imagen aquí ¿Cómo puedo solucionarlo? Apenas estoy empezando mi mundo web.

al llevar las imágenes hacia la izquierda, la de la segunda posición se roba este espacio ¿Cómo puedo solucionarlo? Apenas estoy empezando mi mundo web. Este es mi HTML

`

  <article class="entrada">
                     <h2>Viajar a londres</h2>
                     <img src="img/imagen_1.jpg" alt="Imagen viajar a Londres">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos imus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>
                 <article class="entrada">
                     <h2>Puente de la torre</h2>
                     <img src="img/imagen_1.jpg" alt="Imagen viajar a Puente de la torre">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis </p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos perferendis quo, possimus officia iure magni ea. Velit incidunt aliquam repellat quia excepturi quisquam. Esse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>
                 <article class="entrada">
                     <h2>Metro de Londres</h2>
                     <img src="img/imagen_3.jpg" alt="Imagen Metro de Londres">
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique labore obcaecati inventore quis recusandae id perferendis itaque voluptas beatae? Nostrum ratione laudantium earum voluptate ipsum temporibus illum placeat corporis esse.</p>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quos peEsse adipisci odit molestias accusamus dolores.</p>
                     <a href="#" class="boton">Ler más </a>
                 </article>

` ESTE ES MI CSS

 @media (min-width:480px ){
    .entrada img{
        width: 300px;
        float: left; /* lleva imagen hacia la izquierda*/
    }
Origen Enlace

¿Cómo puedo correr correctamente esta imagen a la izquierda? Sin que se robe el espacio del "Article" de arriba

al llevar las imágenes hacia la izquierda, la de la segunda posición se roba este espaciointroducir la descripción de la imagen aquí ¿Cómo puedo solucionarlo? Apenas estoy empezando mi mundo web.