1. 首頁
  2. 問答
  3. 響應股利與Flexbox的組織MICROTILES

響應股利與Flexbox的組織MICROTILES

2017-10-20 73 views
0

響應股利與Flexbox的組織MICROTILES

#theTeamWrapper { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t height: auto; 
 
\t background-image: url('https://www.kuboland.com/integra/images/bgTexture-01.png'); 
 
\t background-size:cover; 
 
\t text-align: center; 
 
\t display: block; 
 
\t padding-top: 140px; 
 
\t padding-bottom: 20px; 
 
} 
 

 
#megaWrapper { 
 
    width:90%; 
 
    height:auto; 
 
    background-color: ; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-content: flex-start; 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 

 
#tile { 
 
    width:180px; 
 
    height:180px; 
 
    margin: 20px; 
 
    color: #fff; 
 
    font-family: 'Montserrat'; 
 
    position:relative; 
 
} 
 

 
#tileHover { 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    position: absolute; 
 
    width:100%; 
 
    height: 100%; 
 
    opacity:0; 
 
    transition: opacity 0.2s ease; 
 
    cursor: pointer; 
 
} 
 

 
#tileHover:hover { 
 
    opacity:1; 
 
} 
 

 
.tileText { 
 
    font-size:18px; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    margin: 0 auto; 
 
    width:90%; 
 
} 
 

 
.tileSubText { 
 
    font-size:12px; 
 
    opacity: 0.8; 
 
} 
 

 
#tileType { 
 
    width:180px; 
 
    height:180px; 
 
    background-color: #fdd108; 
 
    margin: 20px; 
 
    color: #fff; 
 
    font-family: 'Montserrat'; 
 
    position:relative; 
 
    
 
} 
 

 
.tileType { 
 
\t position: absolute; 
 
\t left:0; 
 
\t top:0; 
 
\t margin-top: -12px; 
 
\t font-size:40px; 
 
} 
 

 
.tileType2 { 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t position: absolute; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t margin-bottom: -8px; 
 
\t font-size: 25px; 
 
\t color:#fff; 
 
} 
 

 
.founder1 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: green; 
 
} 
 

 
.founder2 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: green; 
 
} 
 

 
.founder3 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: green; 
 
} 
 

 
.employee1 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: blue; 
 
} 
 

 
.employee2 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: blue; 
 
} 
 

 
.employee3 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: blue; 
 
} 
 

 
.employee4 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: blue; 
 
} 
 

 
.employee5 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: blue; 
 
} 
 

 
.employee6 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: blue; 
 
} 
 

 
.employee7 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: pink; 
 
} 
 

 
.employee8 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: pink; 
 
} 
 

 
.employee9 { 
 
\t background-image: url(''); 
 
\t background-size: cover; 
 
    background-color: pink; 
 
}
<div id="theTeamWrapper"> 
 
\t \t \t 
 
\t \t \t <div id="megaWrapper"> 
 
\t \t \t \t <div id="tileType"> 
 
\t \t \t \t \t <h3 class="tileType"> 
 
\t \t \t \t \t TEAM 
 
      \t \t \t </h3> 
 
\t \t \t \t \t <h3 class="tileType2"> 
 
\t \t \t \t \t A 
 
      \t \t \t </h3> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="founder1"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="founder2"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 

 
    \t \t \t <div id="tile" class="founder3"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="megaWrapper"> 
 
\t \t \t \t <div id="tileType"> 
 
\t \t \t \t \t <h3 class="tileType"> 
 
\t \t \t \t \t TEAM 
 
      \t \t \t </h3> 
 
\t \t \t \t \t <h3 class="tileType2"> 
 
\t \t \t \t \t B 
 
      \t \t \t </h3> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="employee1"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="employee2"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 

 
    \t \t \t <div id="tile" class="employee3"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="employee4"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="employee5"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="employee6"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="megaWrapper"> 
 
\t \t \t \t <div id="tileType"> 
 
\t \t \t \t \t <h3 class="tileType"> 
 
\t \t \t \t \t TEAM 
 
      \t \t \t </h3> 
 
\t \t \t \t \t <h3 class="tileType2"> 
 
\t \t \t \t \t C 
 
      \t \t \t </h3> 
 
    \t \t \t </div> 
 

 
    \t \t \t <div id="tile" class="employee7"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="employee8"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t 
 
    \t \t \t <div id="tile" class="employee9"> 
 
    \t \t \t \t <div id="tileHover"> 
 
    \t \t \t \t \t <h3 class="tileText"> 
 
    \t \t \t \t \t NAME 
 
    \t \t \t \t \t <br> 
 
    \t \t \t \t \t <span class="tileSubText">Title</span> 
 
      \t \t \t </h3> 
 
     \t \t \t </div> 
 
    \t \t \t </div> 
 
    
 
    </div> 
 
</div>

我有一個包含大量磚的股利，其名稱和標題每個人，也有一些描述性的瓷磚，如「TEAM1」「TEAM2」和 「team3」

每個瓷磚是180x180px，我想這個響應包裝

enter image description here

實現這一目標

有三組顏色的瓷磚，黃色將該組描述爲A，B或C.並且一旦瓷磚向下移動到另一行，因爲沒有更多空間了，我希望它能夠制動該行，並且下一個組要開始在這之下。

我爲https://jsfiddle.net/yw81cxzc/1/

代碼不知道我做錯了，有什麼建議？

來源

2017-10-20 Eugenio

回答

0

你錯過了#megaWrapper的一些結束標籤，它使得它們在錯誤的位置關閉並基本上將它們纏繞在另一個上。您還可以刪除justify-content：space-around;來自#megaWrapper。這應該照顧一切，除非你需要進一步集中。

#theTeamWrapper { 
      position: relative; 
      width: 100%; 
      height: auto; 
      background-image: url('https://www.kuboland.com/integra/images/bgTexture-01.png'); 
      background-size: cover; 
      text-align: center; 
      display: block; 
      padding-top: 140px; 
      padding-bottom: 20px; 
     } 

     #megaWrapper { 
      width: 90%; 
      height: auto; 
      background-color: ; 
      display: flex; 
      flex-wrap: wrap; 
      align-content: flex-start; 
      position: relative; 
      margin: 0 auto; 
     } 

     #tile { 
      width: 180px; 
      height: 180px; 
      margin: 20px; 
      color: #fff; 
      font-family: 'Montserrat'; 
      position: relative; 
     } 

     #tileHover { 
      background-color: rgba(0, 0, 0, 0.7); 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      opacity: 0; 
      transition: opacity 0.2s ease; 
      cursor: pointer; 
     } 

     #tileHover:hover { 
      opacity: 1; 
     } 

     .tileText { 
      font-size: 18px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      transform: translate(-50%, -50%); 
      margin: 0 auto; 
      width: 90%; 
     } 

     .tileSubText { 
      font-size: 12px; 
      opacity: 0.8; 
     } 

     #tileType { 
      width: 180px; 
      height: 180px; 
      background-color: #fdd108; 
      margin: 20px; 
      color: #fff; 
      font-family: 'Montserrat'; 
      position: relative; 
     } 

     .tileType { 
      position: absolute; 
      left: 0; 
      top: 0; 
      margin-top: -12px; 
      font-size: 40px; 
     } 

     .tileType2 { 
      font-family: 'Open Sans', sans-serif; 
      position: absolute; 
      right: 0; 
      bottom: 0; 
      margin-bottom: -8px; 
      font-size: 25px; 
      color: #fff; 
     } 

     .founder1 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: green; 
     } 

     .founder2 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: green; 
     } 

     .founder3 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: green; 
     } 

     .employee1 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: blue; 
     } 

     .employee2 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: blue; 
     } 

     .employee3 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: blue; 
     } 

     .employee4 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: blue; 
     } 

     .employee5 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: blue; 
     } 

     .employee6 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: blue; 
     } 

     .employee7 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: pink; 
     } 

     .employee8 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: pink; 
     } 

     .employee9 { 
      background-image: url(''); 
      background-size: cover; 
      background-color: pink; 
     } 

<div id="theTeamWrapper"> 

     <div id="megaWrapper"> 
      <div id="tileType"> 
       <h3 class="tileType"> 
        TEAM 
       </h3> 
       <h3 class="tileType2"> 
        A 
       </h3> 
      </div> 

      <div id="tile" class="founder1"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="founder2"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="founder3"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 
     </div> 
     <div id="megaWrapper"> 
      <div id="tileType"> 
       <h3 class="tileType"> 
        TEAM 
       </h3> 
       <h3 class="tileType2"> 
        B 
       </h3> 
      </div> 

      <div id="tile" class="employee1"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="employee2"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="employee3"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="employee4"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="employee5"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="employee6"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 
     </div> 
     <div id="megaWrapper"> 
      <div id="tileType"> 
       <h3 class="tileType"> 
        TEAM 
       </h3> 
       <h3 class="tileType2"> 
        C 
       </h3> 
      </div> 

      <div id="tile" class="employee7"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="employee8"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 

      <div id="tile" class="employee9"> 
       <div id="tileHover"> 
        <h3 class="tileText"> 
         NAME 
         <br> 
         <span class="tileSubText">Title</span> 
        </h3> 
       </div> 
      </div> 
     </div> 
    </div>

來源

2017-10-20 16:42:18 wpalmes

+0

哇感謝很多@wpalmes，工作真的很好，不知何故將他們對齊到中間？現在他們到了主包裝的左邊角落？與空間周圍不應該工作？ – Eugenio

+0

我已經做了一些挖掘，看起來有點棘手。可以這麼說，有很多解決方法。我想一個簡單的方法是使用空間或周圍空間（無論哪個適合），在＃mega-wrapper上設置最大寬度以保持該行爲4個項目，然後在每個中斷點使用媒體查詢減少行數量。不是最好的解決方法，但它可能工作。你仍然有最低限度的行，這本身就是另一個問題。 – wpalmes

相關問題

 相關問題