CSS：非常簡單的圖像庫

我並不總是在做web開發，但是當我做CSS時，我是可以想象的最令人沮喪的事情。我試圖創建一個簡單的類來與圖片一起保存圖片。我想要兩行，每行有三個圖像。很簡單。CSS：非常簡單的圖像庫

這是我的代碼，只顯示圖像，它工作正常。

img { 
    position: relative; 
    margin: 0 auto; 
    max-width: 650px; 
    padding: 5px; 
    margin: 10px 0 5px 0; 
    border: 1px solid #ccc; 
} 

<h3>Screenshots</h3> 

<p> 
<a href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
<a href="images/img2.png"><img src="images/img2.png" width="200" height="140"></a> 
<a href="images/img3.png"><img src="images/img3.png" width="200" height="140"></a> 
<a href="images/img4.png"><img src="images/img4.png" width="200" height="140"></a> 
<a href="images/img5.png"><img src="images/img5.png" width="200" height="140"></a> 
<a href="images/img6.png"><img src="images/img6.png" width="200" height="140"></a> 
</p> 


<h3>Installation</h3>

這顯示圖像正是我想，三每一行，然後有一個從< P A填充>，然後安裝部分。爲了得到描述同一div下圖片我在CSS改變IMG到div.img和HTM代碼：

<h3>Screenshots</h3> 

<p> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
<div class="img"> 
    <a target="_blank" href="images/img1.png"><img src="images/img1.png" width="200" height="140"></a> 
</div> 
</p> 

<h3>Installation</h3>

人們會認爲，導致網頁將是完全一樣在第一的img第二種情況和div.img具有相同的屬性。但情況並非如此。使用這段代碼，我將每個div拉伸到列的整個寬度，並且圖像在div左側的另一個下面。

我自己也嘗試這樣的代碼：http://www.w3schools.com/CSS/css_image_gallery.asp，但在這種情況下，我得到安裝和所有後面去到圖像上，忽略<頁的課文>標籤，它具有底部邊緣。

來源

2012-07-24 jaho

請讓jsfiddle，我會讓一切爲你工作:) – skmasq 2012-07-24 16:47:40

http://i.stack.imgur.com/XyURM.jpg – 2012-07-24 16:52:06

@Truth這正是我讀到第一句話時想到的！ – bfavaretto 2012-07-24 16:53:31

爲了保持簡單：使用<span>元素替換您的div，或在div的CSS上設置display: inline。這將使它們按照您的預期工作（如內嵌，而不是塊元素）。

另外：

你不需要margin: 0 auto。它不會像內嵌元素那樣居中嵌套元素
您添加了position: relative，但似乎並不需要它。除非您打算在稍後的時間將absolute位置應用於div內的某個位置。

這裏是一個沒有這兩個屬性的jsfiddle，並且將display: inline添加到divs：http://jsfiddle.net/3BwKY/。

來源

2012-07-24 16:49:44 bfavaretto

這個結果也可以看出在jsfiddle上，邊界顯示在圖像下。 – jaho 2012-07-24 17:03:06

你可以在div上使用'display：inline-block'然後：http://jsfiddle.net/3BwKY/2/ – bfavaretto 2012-07-24 17:10:43

確實有效。謝謝。 – jaho 2012-07-24 17:31:01

CSS：非常簡單的圖像庫

回答

相關問題