0

Quiero colocar una imagen a la izquierda y un texto a la derecha y abajo el texto a la izquierda y la imagen a derecha, pero se muestran uno abajo de otro aun teniendo el display: inline-block. Trate con display:flex y que el div de la imagen del texto estén en columna y cada texto e imagen en linea, con esta opción la imagen se pone arriba del texto.

ayuda amigos por favor,en la parte de about cuando este en pantalla,las imagenes y el texto deben quedar en linea pero a su vez en bloque con las de abajo,como se los explique anteriormente pero no logro solucionarlo y solo debo usar CSS y HTML ademas cuando voy reduciendo la pantalla siempre hay una separación molesta entre los div

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=, initial-scale=1.0" />
    <title>Pizzeria</title>
    <link rel="stylesheet" href="./main.css" />
  </head>

  <body>
    <header>
      <div class="header-container">
        <h1><a href="index.html">PIZZERIA</a></h1>
        <nav>
          <ul>
            <li><a href="#presentation">Inicio</a></li>
            <li><a href="#about">Sobre nosotros</a></li>
            <li><a href="#menu">Menu</a></li>
            <li><a href="#reservation">Reservas</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!--about-->

    <section class="about" id="about">
      <article class="imagenytexto">
        <div class="imagen1">
          <img src="./resources/images/pizza1.jpg" alt="" id="imagen1" />
        </div>
        <div class="texto1">
          <h2 class="title1">Nuestras Pizzas</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
            tenetur incidunt nesciunt quidem quae necessitatibus consequatur eos
            soluta voluptatem. Suscipit distinctio inventore vel? Corrupti
            deleniti velit laborum quod, aspernatur ipsam. Nulla cum voluptate
            autem eius suscipit accusantium iusto velit, atque provident enim
            fuga illo blanditiis quod illum, nisi, quaerat dignissimos.
          </p>
        </div>
      </article>
      <article class="imagenytexto">
        <div class="imagen2">
          <img src="./resources/images/pizza2.jpg" alt="" id="imagen2" />
        </div>
        <div class="texto2">
          <h2 class="title2">Nuestra historia</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
            tenetur incidunt nesciunt quidem quae necessitatibus consequatur eos
            soluta voluptatem. Suscipit distinctio inventore vel? Corrupti
            deleniti velit laborum quod, aspernatur ipsam. Nulla cum voluptate
            autem eius suscipit accusantium iusto velit, atque provident enim
            fuga illo blanditiis quod illum, nisi, quaerat dignissimos.
          </p>
        </div>
      </article>
    </section>
  </body>
</html>
/*----Universal-----*/

* {
  box-sizing: border-box;
  font-family: "Reboto", sans-serif;
  margin: 0;
}

.left {
  float: left;
}

.rigth {
  float: right;
}

.dark_overlay {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}


/*----About----*/

.about {
  height: 1000px;
  width: 100%;
  font-size: 18px;
  border: 5px solid black;
  margin: 0.5rem 0;
}

.about article {
  width: 100%;
  height: 50%;
}
.imagenytexto {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}
#imagen1 {
  width: 40rem;
  height: 500px;
  float: left;
  object-fit: cover;
  flex-direction: row;
}
.texto1 {
  float: left;
  text-align: justify;
  padding: 130px 30px;
  flex-direction: row;
}
#imagen2 {
  width: 40rem;
  height: 500px;
  float: right;
  object-fit: cover;
  flex-direction: row;
}
.texto2 {
  float: left;
  text-align: justify;
  padding: 130px 30px;
  flex-direction: row;
}

.title1 {
  padding: 1rem 1rem 1rem 0;
}
.title2 {
  padding: 1rem 1rem 1rem 0;
}

1 respuesta 1

0

Solo tienes que cambiar la manera en la que utilizas flexbox

/*----Universal-----*/

* {
  box-sizing: border-box;
  font-family: "Reboto", sans-serif;
  margin: 0;
}

.left {
  float: left;
}

.rigth {
  float: right;
}

.dark_overlay {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}


/*----About----*/

.about {
  height: 1000px;
  width: 100%;
  font-size: 18px;
  border: 5px solid black;
  margin: 0.5rem 0;
}

.about article {
  width: 100%;
  height: 50%;
}
.imagenytexto {
  display: flex;
/*   flex-wrap: nowrap; */
  flex-direction: row;
}
#imagen1 {
  width: 40rem;
  height: 500px;  
  object-fit: cover;
  flex-direction: row;
}
.texto1 {  
  text-align: justify;
  padding: 130px 30px;
  flex-direction: row;
}
#imagen2 {
  width: 40rem;
  height: 500px;  
  object-fit: cover;
  flex-direction: row;
}
.texto2 {  
  text-align: justify;
  padding: 130px 30px;
  flex-direction: row;
}

.title1 {
  padding: 1rem 1rem 1rem 0;
}
.title2 {
  padding: 1rem 1rem 1rem 0;
}
.reverse{
  flex-direction:row-reverse;
}
  <header>
      <div class="header-container">
        <h1><a href="index.html">PIZZERIA</a></h1>
        <nav>
          <ul>
            <li><a href="#presentation">Inicio</a></li>
            <li><a href="#about">Sobre nosotros</a></li>
            <li><a href="#menu">Menu</a></li>
            <li><a href="#reservation">Reservas</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <!--about-->

    <section class="about" id="about">
      <article class="imagenytexto">
        <div class="imagen1">
          <img src="./resources/images/pizza1.jpg" alt="" id="imagen1" />
        </div>
        <div class="texto1">
          <h2 class="title1">Nuestras Pizzas</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
            tenetur incidunt nesciunt quidem quae necessitatibus consequatur eos
            soluta voluptatem. Suscipit distinctio inventore vel? Corrupti
            deleniti velit laborum quod, aspernatur ipsam. Nulla cum voluptate
            autem eius suscipit accusantium iusto velit, atque provident enim
            fuga illo blanditiis quod illum, nisi, quaerat dignissimos.
          </p>
        </div>
      </article>
      <article class="imagenytexto  reverse">
        <div class="imagen2">
          <img src="./resources/images/pizza2.jpg" alt="" id="imagen2" />
        </div>
        <div class="texto2">
          <h2 class="title2">Nuestra historia</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
            tenetur incidunt nesciunt quidem quae necessitatibus consequatur eos
            soluta voluptatem. Suscipit distinctio inventore vel? Corrupti
            deleniti velit laborum quod, aspernatur ipsam. Nulla cum voluptate
            autem eius suscipit accusantium iusto velit, atque provident enim
            fuga illo blanditiis quod illum, nisi, quaerat dignissimos.
          </p>
        </div>
      </article>
    </section>

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.