佈局3連勝HTML

Question

嗨圖片鏈接，我在做一個網站，我需要有奠定了像他們的圖像在上面的一些圖片鏈接。灰色矩形是圖像所在位置的佔位符，它們的大小都是相同的（275 x 186），並且在它們之間需要一定的邊距。我還需要能夠添加更多6張圖片。

我似乎無法讓他們正確排隊。任何幫助，將不勝感激。

Answer 1

這樣做的一種方法是使用CSS的「float」屬性。這裏是我將如何解決這個問題。

1. 創建具有的「275px +邊框尺寸」中這樣×3
2. 寬度DIV添加所有的圖像大小爲275 X 186加邊框
3. 分配CSS屬性「浮動一個div：左「到每個圖像。

<

style> 
    div.wrapper{ 
    width: ("275 + YOUR border-size" x 3)px; 
    } 
    div.image{ 
    background-image: url(..path to your img); 
    float: left 
    } 
</style> 

<div class="wrapper"> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    <div class="image"></div> 
    ... add all your imgs here 
    <div style="clear: both"></div> //need this one here to make the wrapper extend 
</div>