2013-04-18 149 views
0

您好,我正在嘗試在圖片的行和列之間添加一些空格。這是我的代碼。我真的很感激,如果你點我在正確的方向CSS,連續的圖片庫,每張圖片之間的空格,

<!DOCTYPE> 
<html> 
<head> 
<style type="text/css"> 

body 
{ 
    background-color:#abe9ff; 
} 
.container { 
    width: 950px; /* look i'm now showing 4 images per line */ 
    margin-left: 10px; 
margin-right: 10px; 
} 
.img { 
/* height: 234px; width: 218px; */ 
float: left; 
    margin-top: 10px; 
margin-left: 30px; 
margin-right: 10px; 

} 
</style> 

<body> 
<div class="container"> 
<div img src="interpret_1.png" alt="Interpret1" width="218" height="234"  href="boywonder.htm"> 
<img src="interpret_1.png" alt="Interpret1" width="218" height="234" href="boywonder.htm"> 
<img src="interpret_1.png" alt="Interpret1" width="218" height="234" href="boywonder.htm"> 
<img src="interpret_1.png" alt="Interpret1" width="218" height="234" href="boywonder.htm"> 
<img src="interpret_1.png" alt="Interpret1" width="218" height="234" href="boywonder.htm"> 



</body> 
</html> 
+0

首先你的div應該被關閉。 –

+0

yeye它發佈時意外刪除,否則我有它 –

回答

0

使用這個網站

<body > 

<div id="wrapper"> 

<div class="container"> 

<img class="image" src="interpret_1.png" alt="Interpret1" width="218" height="234"  href="boywonder.htm"> 
<img class="image" src="interpret_1.png" alt="Interpret1" width="218" height="234" href="boywonder.htm"> 
<img class="image" src="interpret_1.png" alt="Interpret1" width="218" height="234" href="boywonder.htm"> 
<img class="image" src="interpret_1.png" alt="Interpret1" width="218" height="234" href="boywonder.htm"> 
<img class="image" src="interpret_1.png" alt="Interpret1" width="218" height="234" href="boywonder.htm"> 
</div> 



</div> 


</body> 

和CSS是這樣

body{ margin:0 5px; 
} 


#wrapper 
{ 
background-color:#abe9ff; 
     height:500px;} 

.container { width:950px; 
margin-left: 10px; 
margin-right: 10px; 
} 


.image{ 
height: 234px; width: 218px; 
float: left; 
margin-top:10px; 

margin-right: 19px;} 
+0

非常感謝。這是非常感謝 –

+1

你應該把它標記爲答案:) –