如何将以前垂直对齐的照片水平对齐？

Question

I'm "converting" a responsive website and need help with aligning 3 images horizontally that was previously aligned vertically on mobile. I have read some StackOverflow posts, but can't find any solution that works for me.

Check out JSFiddle: https://jsfiddle.net/8dkgcyfq/1/

<section class="team">
  <div>
  <img src="img/lady.jpg">
  <h2>Navn Navnesen</h2>
  <h1>contact@gmail.com</h1>
  <i class="fab fa-facebook"></i>
  <i class="fab fa-instagram"></i>
  <i class="fab fa-linkedin"></i>
  </div>

  <div>
  <img src="img/lady.jpg">
  <h2>Navn Navnesen</h2>
  <h1>contact@gmail.com</h1>
  <i class="fab fa-facebook"></i>
  <i class="fab fa-instagram"></i>
  <i class="fab fa-linkedin"></i>
  </div>

  <div>
  <img src="img/lady.jpg">
  <h2>Navn Navnesen</h2>
  <h1>contact@gmail.com</h1>
  <i class="fab fa-facebook"></i>
  <i class="fab fa-instagram"></i>
  <i class="fab fa-linkedin"></i>
  </div>
</section>

@media only screen and (min-width: 1000px) {
  .team img {
    width: 25%;
    height: auto;
    display: block;
    padding-top: 20px;
  }

  .team {
    text-align: center;
  }

  .team h2 {
    font-family: "Catamaran";
    font-size: 20px;
    color: white;
    font-weight: 300;
    text-align: center;
    padding-top: 20px;
  }

  .team h1 {
    font-family: "Catamaran";
    font-size: 15px;
    color: white;
    font-weight: 300;
    text-align: center;
    padding-top: 5px;
  }

  .team i {
    font-size: 25px;
    color: white;
    padding-top: 10px;
  }
}

Need some help aligning these photos horizontally.

Answer 1

Per my comments, I would use flexbox and a mobile first approach meaning you should only need to change the width in your media query:

 /* put all default styleing outside media query */ .team { display:flex; flex-direction:row; flex-wrap:wrap; } /* I always do mobile first then media query tablet and above */ .team > div { /* personally, I would give these divs a class instead of having to do a bare selector (the slowest of all element selectors) */ width:100%; } @media only screen and (min-width: 1000px) { .team > div { width: 25%; } } 

 <section class="team"> <div> <img src="img/lady.jpg"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> <div> <img src="img/lady.jpg"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> <div> <img src="img/lady.jpg"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> </section> 

Answer 2

You can use display:flex on .team . On mobile ( so default ) you use flex-direction : column so the images are vertically one under the other.

In media query ( where you want to change them ) use flex-direction: row . This way the images ( divs ) will be on one row And style from there.

Check jsfiddle or snippet below. Let me know if this helped you.

 .team { display: flex; flex-direction: column; } @media only screen and (min-width: 1000px) { .team img { width: 100%; height: auto; display: block; padding-top: 20px; } .team { text-align: center; flex-direction: row; } .team h2 { font-family: "Catamaran"; font-size: 20px; color: white; font-weight: 300; text-align: center; padding-top: 20px; } .team h1 { font-family: "Catamaran"; font-size: 15px; color: white; font-weight: 300; text-align: center; padding-top: 5px; } .team i { font-size: 25px; color: white; padding-top: 10px; } } 

 <section class="team"> <div> <img src="https://via.placeholder.com/150"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> <div> <img src="https://via.placeholder.com/150"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> <div> <img src="https://via.placeholder.com/150"> <h2>Navn Navnesen</h2> <h1>contact@gmail.com</h1> <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i> <i class="fab fa-linkedin"></i> </div> </section>