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 标签覆盖..你也使用了 position:relative 和 top:-100px 这也是导致 div 上有巨大差距的原因

于 2013-01-19T08:28:31.287 回答