響應式網頁佈局問題

-4

有沒有人可以弄清楚如何在我縮小窗口或不同分辨率設備的大小時，如何讓圖庫中的圖像遠離圖像框。響應式網頁佈局問題

問題：

代碼：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>BlackBird </title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/skeleton.css"> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <script src="js/jquery-2.1.3.min.js"></script> 
    <script src="js/functions.js"></script> 
    </head> 
    <body> 
    <nav> 
    </nav> 
    <header class="background"> 
     <div class="logo"></div> 
    </header> 
    <section class="conteudo"> 
     <article> 
     </article> 
     <div class="bubble-wrapper"> 
     <article> 
     </article> 
     </div> 
     <article> 
     <hr> 
     <h1>Galeria</h1> 
     </article> 
     <div class="img-box"> 
      <img src="images/gallery/1.jpg"> 
      <img src="images/gallery/2.jpg"> 
      <img src="images/gallery/8.jpg"> 
      <img src="images/gallery/4.jpg"> 
      <img src="images/gallery/6.jpg"> 
      <img src="images/gallery/7.jpg"> 
     </div> 
    <footer>  
    </footer> 
</html>

CSS：

.img-box { 
    width: 100%; 
    height: 400px; 
    background: black; 
} 
.img-box img { 
    opacity: 0.6; 
    width: 15%; 
    display: inline-block; 
    padding-left: 18px; 
    padding-top: 37px; 
} 
.img-box img:hover { 
    opacity: 1; 
}

來源

2016-01-06 m3k3r1

請查看[如何提問]（http://stackoverflow.com/help/how-to-ask）。你應該包括任何相關的代碼。現在，看一張圖像，可能會有人猜測如何解決**你的具體問題**。 – hungerstar

浮動圖像並清除包含的框可能？很難理解你在問什麼。 – iamnotmaynard

基本上我想要的是當我縮小窗口的尺寸（以及其他解決方案）時，圖像仍然保留在黑色方塊內部，這不會發生atm。我已經在html上添加了視口標籤，所以我不知道可能是什麼導致這個\： – m3k3r1

是什麼原因導致基於包裝您發佈的代碼很有可能是每個img都有其15％寬度的PLUS 18px填充。當您縮小窗口時，這會加起來比窗口寬度更寬，因此圖像會換到第二行。

第二排圖像延伸到黑框外的原因是因爲您已在img-box元素上設置了400px的固定高度。

一種選擇是在圖像之間使用基於百分比的填充而不是固定的18px，並且要麼設置img-box溢出來滾動，要麼允許它具有可變高度。

還可以考慮使用媒體查詢來調整不同屏幕寬度的佈局，例如，當寬度變窄時，切換到單列圖像，改變最大圖像寬度，縮小縮略圖等等。您可以使用就像CSS flexbox一樣。

來源

2016-01-07 00:45:12 mc01

謝謝...你真的幫了我很多，我用了溢出滾動和使用百分比填充，它工作得很好。你保存了我的大學畢業作品！ – m3k3r1

和CSS flexbox的鏈接看起來相當不錯，我需要爲我的下一部作品閱讀它。 – m3k3r1

響應式網頁佈局問題

回答

相關問題