0

htmlを使用して大量の画像をステッチしたいのですが、問題はマージンがあることです。Webインスペクターを使用して、これに影響するプロパティを探しますが、1時間以内ではまだわかりません。

私は負のマージンを使用してみました-左、疑似セレクターを使用して負の位置、それは完全に機能しますが、それは正しい方法ではありませんか?

https://dl.dropbox.com/u/2321732/stitch_images/index.html

だから今、私は画像に余白がないようにステッチする最もきれいな方法が欲しいです。

4

4 に答える 4

7

以下を追加します。

body {
    font-size: 0;
}

これは、ブラウザがスペースとしてレンダリングするソースコードの新しい行が原因です。

上記はスペースがレンダリングされないようにしますが、ソースコードから改行を削除することもできます(したがって、タグはすべて1行にあります)。

于 2013-01-02T10:20:22.247 に答える
2

画像をに設定しdisplay: block; float: left、brfloat: left; clear: right

于 2013-01-02T10:23:06.273 に答える
2

em をサイジング単位として使用している場合、Abody97 のソリューションは問題を引き起こす可能性があります。また、すべてを 1 行で書くと読みにくくなります。
代わりに、画像を作成して親要素にfloat: left設定できます。 ただし、何らかの理由で要素をフロートできない場合は、次のようにコメントを使用できます。overflow: hidden

<div>
    <img src="1.jpg" alt=""><!--
 --><img src="2.jpg" alt=""><!--
 --><img src="3.jpg" alt="">
</div>
于 2013-01-02T17:52:11.570 に答える
2

imgタグを一行で書く

    <img src="images/0_0.jpg" alt=""><img src="images/1_0.jpg" alt=""><img src="images/2_0.jpg" alt="">
    <br>

    <img src="images/0_1.jpg" alt=""><img src="images/1_1.jpg" alt=""><img src="images/2_1.jpg" alt="">
    <br>

    <img src="images/0_2.jpg" alt=""><img src="images/1_2.jpg" alt=""><img src="images/2_2.jpg" alt="">

于 2013-01-02T10:21:51.577 に答える