0

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>

3
  • Bienvenido. Deberías colocar el código para que se pueda ayudar. Commented el 24 oct. 2019 a las 0:33
  • Bienvenido Juan... Por favor pon tu codigo. Y agrega la etiqueta html ya que también está involucrado... Commented el 24 oct. 2019 a las 1:01
  • Podrías colocar unas imagenes de la web con el mismo size? Para que pase el codigo a mi VSC y haga el CSS. Commented el 24 oct. 2019 a las 16:46

2 respuestas 2

0

Ahora con flex y grid puedes solucionarlo con facilidad. Solo agrega un para separar la imagen de los textos

    <article class="entrada">
  <h2>Viajar a londres</h2>
  <img src="https://dummyimage.com/300x300/000/fff" alt="Imagen viajar a Londres">
  <div>
    <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>
  </div>
</article>
<article class="entrada">
  <h2>Puente de la torre</h2>
  <img src="https://dummyimage.com/300x300/000/fff" alt="Imagen viajar a Puente de la torre">
  <div>
    <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>
  </div>
</article>
<article class="entrada">
  <h2>Metro de Londres</h2>
  <img src="https://dummyimage.com/300x300/000/fff" alt="Imagen Metro de Londres">
 <div>
    <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>
  </div>
</article>

Y el css quedaría así:

    .entrada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  width: 100%;
  padding: 2em 0;
}

.entrada h2 {
  flex: 0 0 100%;
}

.entrada img {
  float: left;
  flex: 300px 0 0;
}

.entrada div {
  flex: calc(100% - 400px);
}
-1

simplemente use bootstrap

Con el sistema de cuadrícula, puede hacer lo que quiera sin molestar al usuario móvil, aquí está toda la documentación, incluidos ejemplos de código: https://getbootstrap.com.br/docs/4.1/layout/overview/

Lo explicaré muy brevemente para que nadie quede sin un norte;

cree un archivo html vacío para comenzar:

primero inserte esto en la etiqueta <head> de la página:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

luego ingrese esto en la parte inferior de la página, más antes de </body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

ahora hazlo de esta manera:

<!--- crear tres columnas una al lado de la otra en línea recta --->

    <!--- establecer una caja con ancho máximo -->

    <div class="container">

       <!--- inicio de agrupación de elementos --->
      <div class="row">
        <!--- establecer el tamaño de la columna --->
        <div class="col-sm">
          el contenido de la primera columna aquí
        </div>
        <div class="col-sm">
          el contenido de la segunda columna aquí
        </div>
        <div class="col-sm">
          el contenido de la tercera columna aquí
        </div>
      </div>
    </div>

Aquí está el diseño listo para ti: https://getbootstrap.com/docs/4.3/examples/blog/

Aquí hay más ejemplos de implementación: https://getbootstrap.com/docs/4.3/examples/

Si tienes alguna pregunta, cuenta conmigo.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Product example · Bootstrap</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/product/">

    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->
    <link href="product.css" rel="stylesheet">
  </head>
  <body>
    <nav class="site-header sticky-top py-1">
  <div class="container d-flex flex-column flex-md-row justify-content-between">
    <a class="py-2" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img" viewBox="0 0 24 24" focusable="false"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
    </a>
    <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
  </div>
</nav>

<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
  <div class="col-md-5 p-lg-5 mx-auto my-5">
    <h1 class="display-4 font-weight-normal">Punny headline</h1>
    <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
    <a class="btn btn-outline-secondary" href="#">Coming soon</a>
  </div>
  <div class="product-device shadow-sm d-none d-md-block"></div>
  <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
</div>

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
  <div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
    <div class="my-3 py-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
    <div class="my-3 p-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
</div>

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
    <div class="my-3 p-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
  <div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
    <div class="my-3 py-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
</div>

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
    <div class="my-3 p-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
    <div class="my-3 py-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
</div>

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
    <div class="my-3 p-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
  <div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
    <div class="my-3 py-3">
      <h2 class="display-5">Another headline</h2>
      <p class="lead">And an even wittier subheading.</p>
    </div>
    <div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
  </div>
</div>

<footer class="container py-5">
  <div class="row">
    <div class="col-12 col-md">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24" focusable="false"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
      <small class="d-block mb-3 text-muted">&copy; 2017-2019</small>
    </div>
    <div class="col-6 col-md">
      <h5>Features</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="#">Cool stuff</a></li>
        <li><a class="text-muted" href="#">Random feature</a></li>
        <li><a class="text-muted" href="#">Team feature</a></li>
        <li><a class="text-muted" href="#">Stuff for developers</a></li>
        <li><a class="text-muted" href="#">Another one</a></li>
        <li><a class="text-muted" href="#">Last time</a></li>
      </ul>
    </div>
    <div class="col-6 col-md">
      <h5>Resources</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="#">Resource</a></li>
        <li><a class="text-muted" href="#">Resource name</a></li>
        <li><a class="text-muted" href="#">Another resource</a></li>
        <li><a class="text-muted" href="#">Final resource</a></li>
      </ul>
    </div>
    <div class="col-6 col-md">
      <h5>Resources</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="#">Business</a></li>
        <li><a class="text-muted" href="#">Education</a></li>
        <li><a class="text-muted" href="#">Government</a></li>
        <li><a class="text-muted" href="#">Gaming</a></li>
      </ul>
    </div>
    <div class="col-6 col-md">
      <h5>About</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="#">Team</a></li>
        <li><a class="text-muted" href="#">Locations</a></li>
        <li><a class="text-muted" href="#">Privacy</a></li>
        <li><a class="text-muted" href="#">Terms</a></li>
      </ul>
    </div>
  </div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="https://getbootstrap.com/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/https://getbootstrap.com/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script></body>
</html>

1
  • Muchas gracias! Demasiado amable.
    – Juan Jose
    Commented el 30 oct. 2019 a las 21:22

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.