簡體   English   中英

如何將以前垂直對齊的照片水平對齊?

[英]How to align photos horizontally that was previously aligned vertically?

我正在“轉換”一個響應迅速的網站,並且需要在水平對齊3張圖像(以前在移動設備上垂直對齊)方面需要幫助。 我已經閱讀了一些StackOverflow帖子,但是找不到適合我的解決方案。

查看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;
  }
}

需要一些將這些照片水平對齊的幫助。

根據我的評論,我將使用flexbox和移動優先的方法,這意味着您只需要更改媒體查詢的寬度即可:

 /* 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> 

您可以在.team上使用display:flex 在移動設備上(默認設置),您可以使用flex-direction : column因此圖像在垂直flex-direction : column彼此垂直。

在媒體查詢中(要在其中進行更改),請使用flex-direction: row 這樣,圖像(divs)將排成一行並從那里樣式化。

檢查下面的jsfiddle或代碼段。 讓我知道這是否對您有幫助。

 .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> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM