如何去除divs间不需要的垂直间距

我在开发网站的前端时遇到了一些问题。我胜任CSS，但不是很棒。无论如何，我已经创建了一个说明我的问题的jsFiddle here。如何去除divs间不需要的垂直间距

在我的网站的每个页面上，在内容部分的顶部，我有一个横幅图像。我希望在内容中放置一个双色分隔符来分隔这条横幅。（如在实体模型显示我的设计师给我：https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg）

我想这样做的纯CSS + HTML，而不只是无论如何，我已经这样做使用下面的代码夹紧的图像：

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;"> 
<div> 
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div> 
</div>

（请原谅内嵌CSS，它只是用于演示目的。而且，不幸的是，如果我把第二个div上一个换行符和缩进它，它创建空白）

我的问题因为分隔线和图像之间存在很大差距。我曾尝试将margin：0px和padding：0px添加到所有相关元素，并且空白仍然存在。

有人可以帮我吗？

感谢， YM

来源

2013-07-21 Joshua Walsh

使用clearfix方法，你可以搜索这个。 –

对我来说这是一个垂直对齐问题。你可以尝试

.banner { 
    display: block; 
    width: 100%; 
} 
div { 
    height: 10px; 
    vertical-align: top; 
}

这样你不必使用负边界（这是没有错的，只是有争议的做法）。

检查出来here

来源

2013-07-21 06:02:27 Chad

谢谢，我试过vertical-align：top;之前，但我没有设置横幅显示为块。无论如何，我并不是真的想要涉及花车，因为我没有觉得他们是必要的，我避免了负利润率，因为我担心它会如何看待不同的屏幕分辨率。 –

可以使相对位置，然后设置上的东西负。例如：

position: relative; 
top:-10px; 
left:0px;

来源

2013-07-21 04:06:50 Daniel

这实际上是浮动的问题

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg"> 
<div style=""> 
    <div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div> 
</div>

CSS

.banner { 
    width:100%; 
float:left; 
}

http://jsfiddle.net/eLbUU/4/

来源

2013-07-21 04:07:15 Hushme

首先，把暗棕色的浅棕色格。这样，当窗户重新调整大小时，不会影响尺寸的百分比和/或间距。

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>

随着空间，你可以使用负边距或像其他人提到的花车。

.banner { 
    width:100%; 
    /* margin-bottom to the banner is negative which moves the div upward */ 
    margin-bottom: -10px; 
}

fiddle here

来源

2013-07-21 04:11:19 kmkmkm

把显示：块;对于图像类和float：left;所有其他元素可能会有所帮助。

.banner { 
    width:100%; 
    display:block; 
    float:left; 
}

http://jsfiddle.net/bjliu/eLbUU/7/（编辑：对不起错误的链接），使用显示块和浮动的div，也确保了IMG本身具有溢出隐藏我能条纹收紧到IMG显示块

来源

2013-07-21 04:20:33 bjliu

：fiddle

.banner { 
    width:100%; 
    display: block; 
    overflow: hidden; 
} 
div div{ 
    float: left; 
}

来源

2013-07-21 05:23:35

如何去除divs间不需要的垂直间距

回答

相关问题