摘要：本文旨在介紹在寬屏（>768px）中圖片列表中如何顯示為有固定間隙的一行排列，介紹了筆者自己嘗試過得五種寫法，並分析了其缺點，採用什麼方法就得見人見智，具體情況具體分析了。

        如何在窄屏（<320px）中顯示為一列呢，做出的顯示效果如下圖，其鋪設方式是佔滿整行。

                                                                                                                                              

          筆者習慣先寫小屏樣式，再逐漸升級到大屏樣式，以提升樣式程式碼的複用性。該示意圖結構程式碼可參考下方：

              <ul id="media">
			<li>
				<img src="img/img1.jpg">
			</li>
			<li>
				<img src="img/img2.jpg">
			</li>
			<li>
				<img src="img/img3.jpg">
			</li>
		</ul>

       其樣式程式碼可參考下方（因為是先寫的小屏樣式（屏寬<320px），則可不寫媒體查詢語句，直接寫樣式）：

#media li {
		margin-bottom: 10px;
	}
	
	#media li img {
		width: 100%;
	}
 

     將img的width設定為100%，既設定了img的鋪設方式（鋪滿整行），撐開了它的父級即li的寬度，同時也是設定img的高度是隨著img的寬度進行等比縮放，即高度會隨著螢幕寬度變化而變化；

   接下來就開始探討如何在寬屏（>320px）中進行顯示，顯示效果如下圖（以768px頻寬為例），要求圖片與圖片間隔在之後的螢幕寬度中固定顯示為3px;

                         

      方法一：

@media all and (min-width:768px) {
#media {
			margin-right: -3px;
		}
		#media li {
		        float: left;
		        width: 33.07%;
			margin-right: 3px;
		}
}
 

      實際上此類方法是行不通的，因為width是由瀏覽器計算，存在誤差，會出現第三張圖片被擠到下一行的現象，如果想通過調整media的margin-right使圖片排列在一行，會發現margin-right負值已經到一個不可理喻的值；

    方法二

@media all and (min-width:768px) {
#media {
			margin-right: -0.4%;
		}

#media li {
                    float: left;
		    width: 33%;
		    margin-right: 0.3%;
}

    此方法實現的僅僅是>768px且<992px螢幕的圖片排列效果，因為中間的間隙是固定的，想要在>992px螢幕中也呈現與設計圖一樣的效果，則需要重新計算li的寬度和其margin-left值。因為瀏覽器存在誤差，所以在計算時，需要將li和其margin-right百分值取整，使其總和小於數學意義上的100%，ul的margin-right需要根據li計算後的總和，再進行計算；

    方法三

#media li {
                       box-sizing:border-box;
		       width:33.3%;
                       padding-right:3px;
                        
		}
#media li:nth-of-type(3){
                     padding-right:0;
             }
}

   此方法使用了怪異盒模型（box-sizing)，筆者在此使用了css3選擇器來設定第三個li的padding-right值。如果考慮到相容（部分瀏覽器不相容css3選擇器語法），可單獨給該li設定一個類，再給這個類加相應樣式。此方法有一個缺點：因為第三個li使用了怪異盒模型且無padding值，其圖片實際顯示效果會比另外兩張圖大且高一些，雖然誤差不大，但是肉眼可見；

      方法四

     改變結構，即在結構中li（除第三個li)中增加一個空的span，使span的寬度為3px，高度為100%。設定li的寬度為33.3%，再使用定位將span定在兩張圖片之間。因為要改變結構，並不推薦此方法。且此類方法會改變圖片的內容顯示（因為有一部分被遮擋），故只闡述其做法，不展示程式碼；

      方法五

@media all and (min-width:768px) {
  #media {
			display: flex;
			justify-content:space-between;
		}
		#media li {
			width:33.07%;
		}
}

    此方法使用了flex佈局，在計算好li的寬度後，剩餘的空間會平均分配在兩個元素（li）中間。但此方法與方法二缺點一致，無法將li之間的間隙隨著螢幕逐漸變大而固定為3px，需要多次調整li的width。