Question

我正在建立一个网站并且一直在使用＆＃34; background-color＆＃34;我的CSS中的标签用于调试每个块（部分）所在的位置。我的＃＆＃34; #mainContent＆＃34;我遇到了一些麻烦。部分并且无法弄清楚为什么背景颜色（用于调试）没有出现。

以下是整个网页代码的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;
}

Answer 1

我想你错过了＃？

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

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

Answer 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 example

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

无法弄清楚为什么我的CSS部分没有正确显示

2 个答案: