当前位置：文江博客话题详情

如何去除html中div之间的间隙？

发布于 2024-10-19 15:18:47 字数 1254 浏览 2 评论 0原文

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

在此处输入图像描述

在我的网页中，我在容器 div 内使用了 3 个 div。我正在尝试删除不需要的间隙div 之间。

(1)顶部背景图像
(2)中间背景图像
(3)底部背景图像

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

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

提前致谢。

#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 */
}

原文

I am stuck with this problem and not able to come out of this. Please help me.

enter image description here

In my webpage, I have used 3 divs inside a container div.I am trying to remove the unwanted gap between the div.

(1)Top bg image
(2)Middle bg image
(3)Bottom bg image

I am trying to adjust these 3 divs so that it can look like one bg image. My middle part and bottom part are adjusted completely but top part and middle part have some gap in between that i am trying to remove but not able to.

Please refer to the image which i have attached here which shows the gap between top and middle part.Please refer the stylesheet data I had used for placing the images.

Thanks in advance.

#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 */
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不奢求什么 2024-10-26 15:18:47

您是否考虑过使用重置？

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

将其添加到顶部

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

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

http://www.css3.info/preview/圆角边框/

Have you considered using a reset?

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

Add that to the top

However, while we are on the subject: Are you using images to get rounded corners? You can use CSS to get rouned corners nowadays!

Here is a website which can help with those:

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

回复收藏 0 原文

梦过后 2024-10-26 15:18:47

一些调整将修复它：

#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 的顶部需要触摸而不移动

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

Some adjustments will fix it:

#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 can all have margins or padding as long as it's not a "side" that touches the other (ie: bottom of #top and top of #middle need to touch and not move)

Start here, and see what presentation adjustments need to be made. I removed positioning from top, middle, bottom because it isn't relevant for the desired effect. You may need to add them in for absolutely positioning items inside of them, but that's another post.

回复收藏 0 原文