0

最近、div を使用して、ページの特定の位置にアートを配置するようになりました。私が正しいと思うものを手に入れた後、すべてのdivの下にこの大きなギャップがあります。使用するdivが多いほど、ギャップが大きくなるようです。そのギャップをなくしたいだけです。プロはこれについて答えましたか？

ここに私のコードがあります:

<div>
    <div style="position: relative; left: 12px; top: -20px; width: 970px; height: 0px;">
        <img class="alignnone size-full wp-image-1285 devanco_ep_curimg" alt="dsm-napkin-top-TEMP" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-napkin-full.png" width="1001" height="131" />
    </div>
    <div style="position: relative; left: 65px; top: -20px; width: 450px; height: 100px; padding: 20px;">
        <div>
            <h5>We’re a creative full service marketing firm in Northern New Jersey.</h5>
            <h6>Creative Branding | Advertising | PR | Website Design | SEO | World Class Client Support</h6>
        </div>
    </div>
</div>
&nbsp;
<div style="position: relative; left: 548px; top: -180px; width: 193px; height: 72px;">
    <a title="The DSM Group Is A Full Service Agency" href="http://thedsmgroup.com/jason/agency-2/">
        <img class="alignnone size-full wp-image-1412" alt="dsm-who-we-are-btn" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-who-we-are-btn.png" width="251" height="66" />
    </a>
</div>
&nbsp;
&nbsp;
<div style="position: relative; left: 750px; top: -339px; width: 193px; height: 72px;">
    <a title="The Most Complete Marketing Agency In NJ" href="http://thedsmgroup.com/jason/services/">
        <img class="alignnone size-full wp-image-1411" alt="dsm-what-we-do-btn" src="http://thedsmgroup.com/jason/wp-content/uploads/2013/01/dsm-what-we-do-btn.png" width="251" height="66" />
    </a>
</div>
&nbsp;
4

2 に答える 2

3

などのすべてのトップ調整が原因ですtop:-339px。

要素を相対的に配置しても、実際にはドキュメント フローから外れるわけではなく、静的なスペースを使用してそこから移動するだけです。つまり、このような要素がある場合...

.rel {
position:relative;
top:-100px;
}

...技術的にはまだ他のスペースを埋めているため、他の要素が上に移動してギャップを埋めることはありません。

これを説明する jsFiddle を次に示します。

下の図で、ギャップがどのように作成されているかに注目してください。

ここに画像の説明を入力

于 2013-01-18T21:01:25.670 に答える
0

nbsp を使用しているために発生します。またはスペースなので、divタグでより多くのスペースがカバーされます..また、divに大きなギャップがある原因でもあるposition:relativeとtop:-100pxを使用しました

于 2013-01-19T08:28:31.287 に答える