0

我有一系列由间隔 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

4 回答 4

1

在你的 CSS 中添加这个：

.stage img{
    float: left;
    margin: 0px 0px 24px 0px;
}

注意：仔细检查您的(last div class="spacer")它必须是：

<div class="spacer"></div>


--->希望对您有所帮助..™</p>

于 2013-03-04T01:37:14.263 回答
0

图像是内联的，因此要删除间距，您需要逐字逐句地这样做。

IE

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

或者，您可以将它们放在无序列表中并将列表元素浮动到左侧。

于 2013-03-04T00:57:56.077 回答
0

如果将每张图像放在一行中，则所有图像之间都会有空格。

如果您想将图像保留在一行中，请将图像放在 a 中<div class="image-container">并将float: "left"属性放在.image-container img.

于 2013-03-04T00:58:17.267 回答
0

这是你想要的？ http://jsfiddle.net/5QJhg/

.stage img { float: left; }
.spacer { clear: both; }
于 2013-03-04T01:03:25.530 回答