Question

我希望我的整个div有背景颜色＃e2e3e4一路走来。目前它只覆盖上半部分然后停止。

此外，在我的“网络研讨会”链接中，它应该有一个带有深色文本的灰色条，然后悬停状态变为带有白色文本的橙色条。目前你只看到“网络研讨会”，悬停时没有变化。请帮忙。

这是我的jsfiddle：http://jsfiddle.net/huskydawgs/0zfwf2dk/12/

这是我的HTML：

<div class="resources">
<div class="column-resources">
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="73" src="http://www.hapadesign.com/images/apples.jpg" width="193" /></a>
    <h4 class="bar">
        <a href="http://en.wikipedia.org/wiki/Apple">WEBINAR</a></h4>
</div>
</div>

这是我的CSS：

.resources {
    padding: 8px;
    background-color: #e2e3e4;
    width: 100%;
    padding: 20px 0;
}

.column-resources {
    width: 193px;
    float: left;
    margin: 15px;
    font-size: 0.9em;
}

.column-resources img {
border: 1px solid #d1d1d1;
}

.column-resources a {
color: #232323;

h4 {
font-family: Georgia,Helvetica,Arial;
font-size: 1.1em;
font-weight: normal;
margin: 1em 0 .6em 0;
}

h4.bar a {
font-family: Georgia;
font-size: 11px !important;
color: #232323 !important;
background-color: #b7b7b7;
padding-top: 4px;
padding-bottom: 4px;
text-align: center;
text-transform: uppercase;
display: block;
}

h4.bar a:hover {
background-color: #f66511;
color: #fff !important;
}

Answer 1

因为您在资源div中使用了浮点数，所以必须添加：

.resources:after {
  content: "";
  display: table;
  clear: both;
}

对于您的链接：只需在此处添加一个缺少的结束括号：

.column-resources a {
    color: #232323;}

Answer 2

您只需添加：

.resources {
    overflow: hidden;
}

这一个缺少关闭标记}

.column-resources a {
color: #232323;

修复它，它会很好。

编辑以修复图片宽度，请尝试添加以下内容：

.column-resources img {
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

在div和橙色背景附近的缺掉灰色背景在按钮上

2 个答案: