html/css如何使用相同的空格排列所有圖片。

Question

我想在所有圖片之間做相同的間距。它們的寬度將是相同的，只有高度不同。它應該看起來像在圖片中。例如：http://prntscr.com/2ugt3z

Answer 1

你的意思是這樣，這將會把5像素的邊距上的每個圖像標籤中＃內容：

#content img{ 
margin: 5px; 
} 

或進行：

.image-margin{ 
margin: 5px; 
} 

，做類似：

或：http://isotope.metafizzy.co/

Answer 2

那種佈局不能只用浮來完成，你的選擇是：

• 使用Flex佈局（IE10 +）
• 位置的每個元素手動
• 使用插件，如果你正在使用jQuery那麼同位素（http://isotope.metafizzy.co/）或砌體（http://masonry.desandro.com/）是你所需要的，如果你使用純javascript，Salvattore（http://salvattore.com/）就可以做到這一點。