創建響應式圖像庫

我正嘗試在移動設備上創建一個響應式圖像庫，例如Instagram。我想在寬度上有3張圖片，沒有左右邊距。我怎樣才能做到這一點？創建響應式圖像庫

這是我到目前爲止有：

@media (max-width: 480px) { 
 
    .portfolio-list li { 
 
     width:33.3333%; 
 
     height: 100px; 
 
     border: 3px solid white; 
 
     margin: -3px; 
 
    } 
 

 
    .portfolio-container, 
 
    .portfolio-list { 
 
     margin-right: 0 ; 
 
     margin-left:0; 
 
     margin-top:10px; 
 
    } 
 

 
    .portfolio-list { 
 
     width: 100%; 
 
    } 
 
} 
 

 
portfolio-list { 
 
    list-style: none; 
 
} 
 

 
.portfolio-list li { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
} 
 

 
.portfolio-list li img { 
 
    display: block; 
 
    width: 100%; 
 
    margin:0; 
 
    vertical-align: top; 
 
    height: 100%; 
 
}

<container class="portfolio-container text-center"> 
 
    <ul class="portfolio-list" style="margin:0 auto"> 
 
     <li style="margin:0 auto"> 
 
      <a href="#"><img src="{{$img['image']}}"></a> 
 
     </li> 
 
    </ul> 
 
</container>

，我有畫廊的形象是：

來源

2017-07-27 Honey

你能使用引導程序？它幾乎會默認爲你照顧這一切 –

請告訴我在我的代碼中使用Bootstrap的位置？ – Honey

http://getbootstrap.com/getting-started/，然後設置HTML：http：//getbootstrap.com/css/#images –

編輯：添加桌面視圖以及。

總是把你的媒體查詢結束，否則他們將被他們的後續選擇器覆蓋。
將您的非媒體查詢.portofolio-list切換到flexbox。
您在portfolio-list中缺少一個點，其中list-style: none是。

基本上我添加了以下內容：

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

要重置瀏覽器的利潤率，防止箱子倒塌。

評論margin: -3px;在.portfolio-list li，以避免打破確切的居中。

https://jsfiddle.net/ujrruyxq/7/

移動視圖圖片：

桌面視圖：

來源

2017-07-27 15:51:51 Syden

有一個問題你代碼示例，它缺少</style>結束標記。此標籤也在<html>之前，這是HTML5文檔的根標籤。

要回答你的問題，我會用一個響應CSS網，像Grillade來解決這個問題，首先是因爲這將是無用的重建已經存在的東西，其次是因爲你需要幾乎網格無處不在在一個應用程序！

來源

2017-07-27 15:18:19 Gramatiik

創建響應式圖像庫

回答

相關問題