圖片無法正確對齊使用百分比

我一直在嘗試使用百分比對齊一些圖片的高度。圖片無法正確對齊使用百分比

HTML：

<div class="work"> 

    <div class="work_container" id="work_thumb" ontouchstart="this.classList.toggle('hover');"> 

     <div class="front"> 
     <a href="#"><img src="images/dummy1-01.png" border="0"></a>  
     </div> 

     <div class="back"> 
     <a href="#"><img src="images/dummy2-01.png" border="0"></a> 
     </div> 

    </div> 

</div>

CSS：

.work { 
width: 84%; 
height: 100%; 
left: 8%; 
position: absolute; 
} 

.work_container{ 
position: relative; 
top: 0; 
left: 0; 
-webkit-perspective: 10000; 
-moz-perspective: 10000; 
-o-perspective: 10000; 
} 

#work_thumb { 
width: 20%; 
height: 213px; 
float: left; 
display: inline; 
-moz-transform: perspective(10000px); 
-moz-transform-style: preserve-3d; 
} 

#work_thumb img{ 
width: 100%; 
}

正如你可以看到我使用213px的高度，以使在左對齊定位很好左圖像。但是，如果我使用百分比，圖像只是彼此覆蓋（就像一個堆棧）。有什麼辦法可以解決這個問題嗎？因爲如果我使用像素，有時圖片會以不同的屏幕尺寸變形。

來源

2014-04-17 user3526188

你可以得到一個JSFiddle請=）讓我們更容易！ – bezzoon

當然@bezzoon http://jsfiddle.net/8rCzJ/ – user3526188

是應該垂直對齊的圖像？因爲它們在小提琴中水平排列！ – bezzoon

您需要增加任何一個work_thumb ID的高度，或者您需要減少所需圖像的大小，併爲大拇指添加餘量和餘量。我想下面的代碼會幫助你#work_thumb {width：20％; height：50％; margin-left：10px; margin-bottom：10px; float：left; display：inline;}

創建一個div類像外部）第一行類似的第二行，以便第一行包含4個圖像第二個也是4個圖像等等。比包括代碼.outer：first-child {margin-left：0}這將設置保證金每個行的第一個圖像剩下0就會看起來很好

來源

2014-04-17 04:18:46 Nothing

圖片無法正確對齊使用百分比

回答

相關問題