響應式畫廊與內容

我是一個初學者，這是我第一次在堆棧溢出，所以我希望你會寬容:)我試圖建立兩個圖片和div與文本的小反應'畫廊'（視頻：img）。問題在於圖片上有這些白色條紋和題字。我不能讓它們像圖片一樣 - 尺寸較小，它們落在底部。我怎樣才能讓他們「堅持」照片？我正在使用flexbox。響應式畫廊與內容

感謝您的解答和耐心:)

代碼：

.container { 
 
    margin: 0 auto; 
 
    max-width: 1200px; 
 
    padding: 0 1rem; 
 
    box-sizing: border-box; 
 
} 
 

 
.responsive{ 
 
    max-width: 100%; 
 

 
} 
 

 
.box img { 
 
    display: block; 
 

 
} 
 

 
.white_stripe { 
 
    z-index: 1; 
 
    background-color: white; 
 
    opacity: 0.5; 
 
    width: 329px; 
 
    height: 60px; 
 
    position: absolute; 
 
    bottom: 30px; 
 
    display: flex; 
 
    @include tablet { 
 
    flex-direction: column; 
 
    } 
 
    @include mobile { 
 
    flex-direction: column; 
 
    } 
 
} 
 

 
.box p { 
 
    font-size: 0.8rem; 
 
} 
 

 
@media screen and (min-width: 600px) { 
 
    .gallery { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    } 
 
    .box { 
 
    width: 30%; 
 
    } 
 
} 
 

 
@media screen and (min-width: 1000px) { 
 
    .box { 
 
    width: calc(100%/3); 
 
    } 
 
} 
 

 
.box { 
 
    margin: 1rem; 
 
} 
 

 
@media screen and (min-width: 600px) { 
 
    .box { 
 
    width: calc(50% - 3rem); 
 
    } 
 
} 
 

 
@media screen and (min-width: 1000px) { 
 
    .box { 
 
    width: calc(33.3333% - 3rem); 
 
    } 
 
} 
 

 
.txt { 
 
    border: 1px solid #E0E0E0; 
 
    padding: 0 20px 0 20px; 
 
}

 <div class="container"> 
 
      <div class="gallery"> 
 
      <div class="box"> 
 
       <div class="white_stripe ws_one"></div> 
 
       <img src="images/box1_img.jpg" alt="Chair CLAIR" title="Chair CLAIR" class="responsive"> 
 
      </div> 
 
      <div class="box"> 
 
       <div class="white_stripe ws_two"></div> 
 
       <img src="images/box2_img.jpg" alt="Chair MARGARITA" title="Chair MARGARITA" class="responsive"> 
 
      </div> 
 
      <div class="box txt"> 
 
       <h4>Finds all inputs</h4> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
 
        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> 
 
      </div> 
 
      </div> 
 
     </div>

來源

2016-09-20 Todra

It's只是一種猜測，因爲我haven't工作與柔性尚未。但是，如果您將.white-stripe設置爲display: block，會發生什麼情況？

但更需要的答案可能是：使.box爲position: relative。

來源

2016-09-20 16:37:55

是啊！有用！非常感謝你:) – Todra

很高興，我可以幫忙;）現在究竟是哪一點？顯示區塊或位置相對？你能否也許標記這個答案是正確的？ ;） –

兩者:)非常感謝！ – Todra

響應式畫廊與內容

回答

相關問題