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

画像はインラインなので、スペースを削除するには文字通りそうする必要があります。

すなわち

        <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

すべての画像を一列に並べると、すべての画像の間にスペースができます。

画像を 1 行にまとめたい場合は、画像を 内に<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 に答える