均勻分佈圖像庫

我有一個圖像庫，每個圖像都有相同的寬度和高度，比如10px。我想讓它們間隔一段距離，以便連續有5個，並且它們的間距均爲5px。容器div有5px的填充。有多行！均勻分佈圖像庫

我的問題是，如果我給每個圖像的5像素的左邊界然後：

一）div容器的尺寸適合，因此只有4圖像適合於一行作爲五分之四餘量分流它到下一行。

b）容器div的大小爲額外的5px，導致每行末尾有一個額外的間隙。

我應該如何設計我的圖像，使它們全部適合正確的行並且沒有任何難看的間隙而不更改容器填充？

來源

2010-09-07 Rupert Madden-Abbott

您希望在圖像div和頂部左邊距的容器div上留下右邊距和底邊距。

CSS：

.container { 
    padding: 5px 0 0 5px; 
    background-color: green; 
    width: 75px; 
    position: relative; 
    overflow: hidden; 
} 

.image { 
    margin-right: 5px; 
    margin-bottom: 5px; 
    float:left; 
    width:10px; 
    height:10px; 
    background-color: red; 
}

HTML：

<div class="container"> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
</div>

檢查它在行動：http://jsfiddle.net/RP9Cg/

我只是再次重讀你的問題，我看到了「不改變容器的填充「位。如果你絕對必須在容器的所有邊上都有5px的填充（不知道爲什麼，也許你可以說），那麼你將需要一些額外的樣式爲你的圖像，每一行的最後一個圖像和最後一行的所有圖像。看看一個可能的解決方案：http://jsfiddle.net/T3HrJ/

來源

2010-09-07 03:18:02 Strelok

我還是很新的HTML CSS &自己，雖然當我想做到這一點我列入

 text-align:center;

在該div CSS文件

，這似乎工作。值得一試！

來源

2010-09-07 03:00:38 anthr

在任何用於生成圖像標記的代碼循環中，都可以使用模運算符爲每個圖像分配一個列索引CSS類。然後在你的樣式中，你可以做一些事情，比如關閉第一個「列」中每個圖像的左邊距。 for循環輸出

僞代碼：

for ($i=0; $i<gallerySize; $i++) { 
    echo '<img class="galleryimage gridcolumn' . ($i%5) . '" src="blahblah.gif">'; 
}

然後你可以使用這樣的CSS規則改變每一行的第一個項目：

img.galleryimage { margin: 5px; } 
img.gridcolumn0 { margin-left: 0px; }

來源

2010-09-07 03:45:06 babtek

均勻分佈圖像庫

回答

相關問題