將同一行內的圖像對齊

我無法對齊某些圖像。下面是目前東西怎麼看起來擷取畫面：將同一行內的圖像對齊

enter image description here

我試圖讓所有四個圖像排隊在同一「行」。任何未來的圖像將從新的一行開始。

我試過各種方法，雖然他們都沒有工作。如果用戶可以給我一個粗略的開始，我會很感激。

我想補充一點，每個圖像都有一個簡單的動畫：

 $(document).ready(function(){ 
     $("#id").hover(function(){ 
      $(this).stop().animate({opacity: 0.75, marginTop: -10}, 400); 
      },function(){ 
      $(this).stop().animate({opacity: 1.0, marginTop: 0}, 400); 
     }); 
    });

來源

2014-01-09 user3179778

你已經有3人在排，所以也許第四隻是不適合。也許像'selector：last-child {margin-right：0}'可能會幫助你。 – davidpauljunior

請在您的問題中顯示相關的HTML和CSS代碼。添加一個http://jsfiddle.net將有助於調試您的問題。 –

[最簡單的垂直對齊方式，水平對齊的圖像？]（http://stackoverflow.com/questions/21033759/easiest-way-to-vertically-align-horizontally-aligned-images） – joseeight

你能請張貼在圖像中包含的HTML代碼？通常情況下，您應該可以通過應用css樣式「float：left」並確保可用寬度足夠（確保統計容器的邊距和圖像邊距以確定可用寬度）來添加它們。

來源

2014-01-09 23:52:51 Cosmin

如果您使用float:left這將解決您的問題。

http://goo.gl/vtHg3b

來源

2014-01-10 00:14:20 user3024950

一種方法，你可以做的就是所有的圖像來排隊，而不必把你的元素的DOM之外（使用浮標做到這一點）。使用display：inline-block;和vertical-align：top;

見例如

img { 
    display: inline-block; // This will align your items side-by-side 
    vertical-align: top; // Why because by default Inline-block sets your vertical to baseline 
}

希望這有助於。

來源

2014-01-10 00:18:06 Cam

沒有看到你的代碼很難說肯定，但它看起來像你的圖像不適合他們的容器。如果您在空間不足時將它們浮動，則會將元素強制下移到下一行。正如@davidpauljunior所述，您可以嘗試刪除應用於圖像的任何右邊距。如果這樣做可以縮小圖像的大小（如果通過背景屬性應用），則將寬度和高度值減少90％（或任何您可能需要的）並將

background size: 90%;

添加到圖像容器。如果他們是內聯圖像更好。只要使用

img { 
    max-width:100%; 
}

和除去任何尺寸施加到內嵌元素。希望有所幫助。

來源

2014-01-10 00:36:41 Davidicus

將同一行內的圖像對齊

回答

相關問題