我有一系列由spacer div分割的图像,但我需要一个接一个的图像没有任何间距。我试过了
float:left
给出了我想要的效果,但是将所有内容抛到左边,并删除所有填充。
display: block
似乎不会影响我的图像。
但两者都没有给出所需的
<div class="stage">
<div class="spacer"></div>
<img src="images/portfolio/GifHeader32col.gif" >
<img src="images/portfolio/lights.png" />
<img src="images/portfolio/SG-Body.png" />
<img src="images/portfolio/footer.png" >
<div class="spacer"></div>
<img src="images/portfolio/GifHeader32col.gif" >
<img src="images/portfolio/lights.png" />
<img src="images/portfolio/SLT-Body.png" />
<img src="images/portfolio/footer.png" >
<div class="spacer"></div>
<img src="images/portfolio/GifHeader32col.gif" >
<img src="images/portfolio/lights.png" />
<img src="images/portfolio/SSG-Body.png"/>
<img src="images/portfolio/footer.png" >
<div class="spacer"</div>
</div>
我已经尝试了我能想到的一切,但我的css / html仍然非常原始。 非常感谢。
编辑:CSS
#stage {
width: 700px;
}
-
.spacer {
height: 1px;
clear: both;
border-bottom: 1px;
border-style: solid;
border-color: #d6d6d6;
margin: 20px 5px 20px 5px;
}
答案 0 :(得分:1)
在CSS中添加:
.stage img{
float: left;
margin: 0px 0px 24px 0px;
}
注意:仔细检查你的(最后一个div类=“spacer”)它必须是:
<div class="spacer"></div>
---&gt;希望它有帮助......™
答案 1 :(得分:0)
图像是内联的,因此要删除间距,您需要按字面意思执行此操作。
即
<img src="images/portfolio/GifHeader32col.gif" ><!--
--><img src="images/portfolio/lights.png" /><!--
--><img src="images/portfolio/SG-Body.png" /><!--
--><img src="images/portfolio/footer.png" >
或者,您可以将它们放在无序列表中,并将列表元素浮动到左侧。
答案 2 :(得分:0)
如果您将每个图像放在一行中,则所有图像之间都会有空格。
如果您想将图像保持在一行中,请将图像放在<div class="image-container">
内,并将float: "left"
属性放在.image-container img
上。
答案 3 :(得分:0)
这是你在找什么? http://jsfiddle.net/5QJhg/
.stage img { float: left; }
.spacer { clear: both; }