Question

您好我想在一行中的图片之间以及列中添加一些空格。这是我的代码。如果你能指出我正确的方向，我真的很感激

<!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>

Answer 1

使用此html

<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;}

CSS，图片库连续，每张图片之间的空间，

1 个答案: