在css中浮動圖像

下面的html和css格式排列我的圖像，以便通過浮動每行有九個。然而，有，在每一行的末尾有很大的差距（但可能不夠大，以適應另一種形象，從而在新行開始）：在css中浮動圖像

HTML：

<div id = "body"> 

<div class="img"> 
    <a href=""> 
    <img src="" width="110" height="90"> 
    </a> 
    <div class="desc"></div> 
</div> 

<div class="img"> 
    <a href=""> 
    <img src="" width="110" height="90"> 
    </a> 
    <div class="desc"></div> 
</div> 
</div> 

//This is repeated many times so that there are 4 rows of nine images

CSS：

div.img 
    { 
    margin:2px; 
    border: 2px solid #000000; 
    height:auto; 
    width:auto; 
    float:left; 
    text-align:center; 
    } 
div.img img 
    { 
    display:inline; 
    margin:8px; 
    } 

div.desc 
    { 
    text-align:center; 
    font-weight:normal; 
    width:120px; 
    margin:5px; 
    }

我的第一個問題是我如何「移動」每行的第一個圖像，使畫廊在屏幕上是對稱的。我的第二個問題涉及如何確保每個瀏覽器（每個屏幕寬度）上的這種形式（9x4）相同？

目前我一直在使用固定容器（以像素爲單位）來填充我自己的屏幕。提前謝謝了。

來源

2012-12-24 Hector

將一個div下的所有圖像div封閉起來。添加保證金屬性到新添加的div –

將新的div應用到每行的第一個圖像，我想？對第二個問題有什麼想法？ – Hector

。在新div下包含所有九個圖像div，併爲新添加的div添加margin-left –

而不是使用float: left，在容器div上使用display: inline-block。這使您可以居中圖片：

#body { 
    text-align: center;    
} 
div.img 
{ 
    display: inline-block; 
    .... 
}

http://jsfiddle.net/xzH7R/1/

來源

2012-12-24 15:23:47 GolezTrol

精彩 - 一個非常整潔的解決方案！我是否認爲這也會解決多瀏覽器（我的第二個問題）關注點？應該做對嗎？ – Hector

是的，也就是說，圖像填充可用寬度。如果瀏覽器更寬或更小，則可以連續獲得10或8甚至3張圖像。只要適合，每行都居中。 – GolezTrol

把所有的div一個父DIV（或每一行和4個父div的一個最重要的）裏面。對於內部div，給位置爲絕對的，以便它們相對於父容器。

來源

2012-12-24 15:25:35 GautamJeyaraman

您可以使用外部容器中的填充左側將第一個圖像向右移動一點。

您必須指定所有尺寸的百分比，以便屏幕以不同分辨率正確縮放。

最好的辦法是給每個元素（div，img等）不同的顏色邊框，看看這些邊框是如何相互對齊的。

來源

2012-12-24 15:27:45 ATOzTOA

在css中浮動圖像

回答

相關問題