删除列中所选图像之间的空间

时间:2013-03-04 00:49:41

标签: css html alignment image

我有一系列由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;
}

4 个答案:

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