0

我正在建立一个站点，并且一直在我的 CSS 中使用“背景颜色”标签来调试每个块（部分）所在的位置。我的“#mainContent”部分遇到了一些问题，无法弄清楚为什么背景颜色（用于调试）没有出现。

这是整个页面代码的 JSFIDDLE 链接：http: //jsfiddle.net/JGAd6/

这是与该部分相关的代码：

-- HTML --

<div id="mainContentWrapper">

    <div id="mainContent">

        <div id="services">

            <div class="serviceNavLink"><a href="#">Marketing Strategy</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw 
                denim fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>
            </div>
            <div class="serviceNavLink"><a href="#">Outsourced Marketing</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw denim 
                fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>
            </div>
            <div class="serviceNavLink"><a href="#">Market Research</a>
                <p>Qui tonx helvetica master cleanse, odd future cupidatat raw 
                denim fugiat et intelligentsia quis semiotics quinoa. Gentrify pork belly consequat synth. Portland ethical salvia, ex sunt mustache flexitarian art party wayfarers. Tousled ennui scenester, nostrud brunch banjo raw denim pug pour-over. Nesciunt synth mlkshk keytar, skateboard fashion axe reprehenderit umami pug bespoke.</p>          
            </div>

        </div>

    </div>  

</div>

-- CSS --

#headerWrapper, #topContentWrapper, #mainContentWrapper, #footerWrapper {
width:100%;
clear:both;
}

#headerContent, #topContent, #mainContent, #footerContent {
width:955px;
margin-left: auto;
margin-right: auto;

padding-right: 1em;
padding-left: 1em;
}


#mainContentWrapper {
border:1px solid #000; /* DEBUG ONLY */
background-color: #61e9a1; /* DEBUG ONLY */
}

#mainContent {
font-size: 1.2em;
background-color:ff0000; /* DEBUG ONLY */
line-height: 1.6em;

padding-top: 1em;
padding-bottom: 1em;
}

#services a:hover {
color: #000;
}

#services p {
width:200px;
font-size: 14px;
}
4

2 回答 2

2

我想你错过了#？

background-color:#ff0000; /* DEBUG ONLY */

http://jsfiddle.net/JGAd6/1/

于 2012-12-21T17:56:16.550 回答
2

如果您指的是没有出现红色背景，则需要将 CSS 更改为：

#mainContent {
font-size: 1.2em;
background-color:#ff0000; /* DEBUG ONLY */
line-height: 1.6em;
overflow:auto;
padding-top: 1em;
padding-bottom: 1em;
}

jsFiddle 示例

我添加了一条规则并为您的背景颜色声明overflow:auto插入了一个缺失值。#

于 2012-12-21T17:59:28.293 回答