16

在为网站开发前端时，我遇到了一些障碍。我能胜任 CSS，但并不出色。无论如何，我在这里创建了一个 jsFiddle来说明我的问题。

在我网站的每个页面上，在内容部分的顶部，我都有一个横幅图像。我希望放置一个两色分隔线，将横幅与内容分开。（如我的设计师给我的模型所示：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

4

6 回答 6

19

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

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

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

在这里查看

于 2013-07-21T06:02:27.667 回答
6

您可以使位置相对，然后将顶部设置为负值。前任：

 position: relative;
 top:-10px;
 left:0px;
于 2013-07-21T04:06:50.850 回答
4

这实际上是浮动问题

    <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-21T04:07:15.800 回答
2

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

.banner {
    width:100%;
    display: block;
    overflow: hidden;
}
div div{
    float: left;
}
于 2013-07-21T05:23:35.597 回答
1

首先，把深棕色的放在浅棕色的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;
}

在这里摆弄

于 2013-07-21T04:11:19.227 回答
1

摆放展示：挡板；对于图像类和浮动：左；对于所有其他元素可能会有所帮助。

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

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

于 2013-07-21T04:20:33.260 回答