背景没有显示整个div?

时间:2014-05-02 05:50:30

标签: css

这是我想要实现的目标: enter image description here

这就是我所取得的成就: enter image description here

由于某种原因,背景不会显示在整个区域。 该页面位于http://goo.gl/K17Fjs

<div id="overview">
<img src="images/home-layout_17.png" alt="">
<div id="overview-text">
<h1>Overview</h1>
<p>Salem Al Hajri is a Company, registered under Qatar law, providing services in building construction, maintenance and manpower supply.</p><p>The main business of the company is to provide well trained, experienced, dedicated and hard working workers to the client. We will mobilize the construction workforce you need, for long or short-term projects, anywhere in the Qatar. Our team of construction professionals offers a single-source solution for all of your construction-related needs whether its restoration, site preparation, a new facility or facility renovation, we have the experience and personnel to provide the highest quality... Read More.</p>
</div>
</div>

我的CSS:

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
font-weight: normal;
color: #53504a;
}
#overview {
background-color: #f6f6f6;
border: 1px solid #dbdada;
border-radius: 10px;
margin-top: 21px;
padding: 12px;
}
#overview img { float: left;}
#overview-text { float: left; width: 650px; padding-left: 12px}

3 个答案:

答案 0 :(得分:1)

overflow: hidden;添加到您的#overview规则。

另外,了解clearfix

答案 1 :(得分:1)

在结束<div style="clear:both;"></div> div之前添加#overview,即在#overview-text div之后。

这是因为您正在使用浮动元素&amp;不清除它们。除非使用clear,否则不计算浮动元素高度来计算父母身高。

答案 2 :(得分:0)

将<{1}},overflow: hidden;宽度属性添加到 #overview