4

我被这个问题困住了，无法摆脱这个问题。请帮我。

在此处输入图像描述

在我的网页中，我在一个容器 div 中使用了 3 个 div。我试图消除 div 之间不需要的间隙。

  • (1)Top bg图片
  • (2)中间bg图像
  • (3)底部bg图像

我正在尝试调整这 3 个 div，使其看起来像一个 bg 图像。我的中间部分和底部已完全调整，但顶部和中间部分之间有一些间隙，我试图移除但无法移除。

请参考我在此处附加的图像，该图像显示了顶部和中间部分之间的间隙。请参考我用于放置图像的样式表数据。

提前致谢。

#main_container {
    background-repeat:no-repeat;
    width:645px;
    float:left;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
}
#middle_part {
    background-image: url('/DiscoverCenter/images/apps_mid.png');
    background-repeat:repeat-y;
    width:645px;
    padding-bottom:10px;
    overflow:hidden;
    height:auto;
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#top_part {
    background-image:url('/DiscoverCenter/images/apps_top.png');
    width:645px;
    top:0px;
    height:47px;  /* actual height of the top bg image */
    clear:both;
    position:relative;
    display: block;
    vertical-align: bottom;
}
#bottom_part {
    background-image:url('/DiscoverCenter/images/apps_btm.png');
    width:645px;
    height:24px; /* actual height of the bottom bg image */
}
4

8 回答 8

11

您是否考虑过使用重置？

* {
    padding: 0px;
    margin: 0px
}

将其添加到顶部

但是，当我们讨论这个主题时：您是否使用图像来获得圆角？你现在可以使用 CSS 来获得圆角！

这是一个可以帮助解决这些问题的网站：

http://www.css3.info/preview/rounded-border/

于 2011-02-28T01:10:02.367 回答
1

一些调整将解决它：

#main_container, #top_part, #middle_part, #bottom_part { margin:0; padding:0; width:645px; }
#main_container {
    float:left; 
    } /* setting height:auto and overflow:hidden won't do anything */

#top_part {
    background:url('/DiscoverCenter/images/apps_top.png') no-repeat;
    clear:both;
    height:47px;
    }
#middle_part {
    background:url('/DiscoverCenter/images/apps_mid.png') repeat-y;
    display: block; /* only needed if you're assigning this id to an inline element */
    min-height: ?? /* assure this element can expand, but never collapses completely */
    vertical-align: bottom;
    }
#bottom_part {
    background:url('/DiscoverCenter/images/apps_btm.png');
    height:24px;
    }

top_part、middle_part、bottom_part 都可以有边距或填充，只要它不是接触另一个的“边”（即：#top 的底部和#middle 的顶部需要触摸而不移动）

从这里开始，看看需要进行哪些演示调整。我从顶部、中间、底部删除了定位，因为它与所需的效果无关。您可能需要添加它们以在其中绝对定位项目，但这是另一篇文章。

于 2011-02-28T01:56:00.080 回答
0

我遇到了同样的问题，我可以解决这个问题的唯一方法是在浏览器中使用 InspectElement 并不断将边距更改为某个 -ve 值。

于 2013-09-01T13:43:51.717 回答
0

在这种情况下，边距重置非常适合我

于 2013-07-12T10:26:45.260 回答
0

您可能希望将填充设置为 0 而不是 10px，并明确设置 div 的高度而不是使用 auto。

或者创建一个包含整个背景图像的包装器 div，这样您就不必担心它们在某些浏览器中不对齐......

于 2011-02-28T01:17:23.583 回答
0

这是 Top bg 图像大小的问题。图像的大小为 45 pix，我将 div 的大小设为 47 pix。通过减小 div 的大小解决了我的问题。非常感谢 Dawson 和 DBz 的帮助。

于 2011-02-28T19:51:57.483 回答
0

我设法自己解决了这个问题

margin:-16px
于 2012-02-29T16:24:06.103 回答
-1

当我有三个（顶部，中间，底部）背景并且每个都是 div 标签时，这很有效

margin:-8px;

于 2012-08-20T00:07:19.380 回答