圖像之間的內部空間？

我想用縮略圖創建一個畫廊，但是我遇到了一個問題。如果我想劃出大拇指，我應該做一些像margin-right: 15px;，但是這會爲最右邊的圖像創造空間。我將如何去創造這些空間而不讓它們在模板的邊緣？圖像之間的內部空間？

例子： enter image description here

謝謝！

來源

2012-12-30 pufAmuf

你需要均勻間隔嗎？ –

它看起來更美觀宜人 – pufAmuf

那麼你不能使用'：最後一個孩子'，因爲它會將最後一個元素推到比其他人的間距更遠的地方。 –

你需要的是容器元素上切緣陰性：

http://jsfiddle.net/LYhum/

.container { 
    margin: -10px 0 0 -10px; 
} 

.container .image { 
    margin: 10px 0 0 10px; 
    /* either floated or set to inline-block */ 
}

如果你的容器是響應（即你不知道這將是多麼寬），Flexbox的價值一看：

http://jsfiddle.net/LYhum/4/（有後備的不Flexbox的支持的瀏覽器）

.container { 
    margin: -10px 0 0 -10px; 
    display: flex; 
    -moz-flex-flow: row wrap; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    -moz-justify-content: space-between; 
    -webkit-justify-content: space-between; 
    justify-content: space-between; 
} 

.container .image { 
    margin: 10px 0 0 10px; 
    background: red; 
    width: 100px; 
    height: 100px; 
    display: inline-block; 
}

來源

2012-12-30 00:30:32 cimmanon

我認爲<li>這裏，但糾正我，如果我錯了：

ul.thumbs li { 
    margin-right: 15px; 
} 
ul.thumbs li:last-child { 
    margin-right: 0; 
}

使用:last-child僞選擇。（請記住一些quirks）

來源

2012-12-30 00:17:54

Downvote因爲...？ –

不是我！感謝您的回答布拉德 – pufAmuf

並不意味着它，但我注意到最近沒有評論解釋/合理化，反對票增加。有點令人失望。 –

如果您希望它們均勻間隔，邊對邊，則必須進行一些數學運算。

用你想要的邊距減去正方形的寬度以便沒有間隙。

(width of container) - ((# of squares)*(width of squares)) 
divided by (# of squares - 1)) == margin required for even spacing

例如：

如果容器寬度是300像素，並且具有正方形是30像素，使餘量右== 37.5px（150像素它們之間由4（4位劃分））... 然後使用類似於：最後一個孩子的技巧來糾正最後一個方塊。（或者只是在最後一個正方形上對0邊距進行硬編碼）如果不做適當的數學運算，最後一個正方形將具有與其他4個正方形不同的間距。

| ------------------------ 300px ------------------| == the container 
|square1-----square2-----square3-----square4-----square5| 
| ^ ^^ ^^ ^ ^ ^^
| 30 37.5 30 37.5 30 37.5 30 37.5 30 | == 300px 

* not to scale :) 


.square { 
    width:30px; 
    margin-right:37.5px; 
} 
#square5 { 
    margin-right:0; 
}

編輯這都將取決於容器的寬度......如果不是在像素硬編碼（即它是％），那麼我會建議做相同的排序數學，但使用％寬度和％邊距代替。

來源

2012-12-30 00:27:57

圖像之間的內部空間？

回答

相關問題