Question

我在为网站开发前端时遇到了一些麻烦。我有能力使用CSS，但不是很棒。无论如何，我已经创建了一个jsFiddle here来说明我的问题。

在我网站的每个页面上，在内容部分的顶部，我都有一个横幅图片。我想把一个双色分隔器从内容中分离出这个横幅。（正如我的设计师给我的模型所示：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

Answer 1

对我而言，这是一个垂直对齐问题。你可以尝试

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

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

查看here

Answer 2

这实际上是浮动问题

    <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/

Answer 3

你可以使位置相对，然后将顶部设置为减去。例如：

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

Answer 4

使用显示块并浮动div，同时确保img本身是隐藏溢出的显示块我能够将条纹收紧到img：fiddle

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

Answer 5

首先，将较深的棕色放入浅棕色的div中。这样，当重新调整窗口大小时，不会影响大小调整百分比和/或间距。

<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

Answer 6

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

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

http://jsfiddle.net/bjliu/eLbUU/7/（编辑：抱歉错误链接）

如何删除div之间不需要的垂直间距

6 个答案: