Question

我正在构建网页布局，其中包含5px宽DIV，我用作间隔符，如果我定义我的风格

div#main_spc {
    display: block; 
    width: 5px; 
    background: url(../Images/contsep.gif) repeat-y top center; 
    float: left;
    position: relative;
}

并将高度内联

<div id="main_spc" style="height: 356px;"></div>

一切正常，但是当我改变我的代码以从外部CSS文件中应用高度时

div.main_spc{
    display: block; 
    width: 5px; 
    background: url(../Images/contsep.gif) repeat-y top center; 
    float: left;
    position: relative;
}

div.main_spc.abc{
    height: 356px;
}

并像这样改变XHTML代码

<div class="main_spc abc"></div>

对不起TYPO，当然它总是CLASS而不是STYLE，我正在写这个问题匆忙而我错过了。如果是这样的话，那么firebug首先会有问题指向CSS定义！

DIV是看不见的，至少我把一些内容放在里面，然后DIV是文字高度高。

我试图从firebug检查这个元素，虽然source是正常的，但firefox（可能还有其他浏览器）忽略了HEIGHT，firebug将这个CSS元素显示为

div.main_spc.abc {
}

我想知道如何改变我的CSS以使高度不被样式定义所忽略？

Answer 1

使用类属性

替换

<div style="main_spc abc"></div>

与

<div class="main_spc abc"></div>

您已经定义了两个类main_spc和abc，并且您使用'class'属性包含一个类而不是样式。样式用于内联样式，如

style='height: 356px;'

<强> 修改

并不是firebug发出height属性的情况。如果你检查右侧的样式部分，你可以看到与元素相关的类，你可以在'abc'类中看到height属性。

如果要将overflow属性设置为hidden，则内容不会溢出。在您的情况下，我认为您正在尝试获得高度为356px且宽度为5px的垫片。然后给

&nbsp;

在div内部看到结果。

修改了空格代码的代码

div.main_spc
{
                display: block; 
                width: 5px; 
                background: url(../Images/contsep.gif) repeat-y top center; 
                float: left;
                position: relative;
}

.abc
{
         height: 356px;
}

<div class="main_spc abc">&nbsp;</div>

Answer 2

你让abc成为main_spc的孩子，而不是兄弟姐妹。所以你的CSS

div.main_spc{
        display: block; 
        width: 5px; 
        background: url(../Images/contsep.gif) repeat-y top center; 
        float: left;
        position: relative;
}

div.main_spc.abc{
        height: 356px;
}

实际上正在寻找像

这样的xhtml

<div class="main_spc"><div class="abc"></div></div>

将CSS更改为

div.main_spc{
        display: block; 
        width: 5px; 
        background: url(../Images/contsep.gif) repeat-y top center; 
        float: left;
        position: relative;
}

div.abc{
        height: 356px;
}

然后

<div class="main_spc abc"></div>

会奏效。

Answer 3

你似乎已经切换为ID选择器（＃）和类选择器（。），在这种情况下你需要更改CSS定义或

<div class="main_spc"></div>

CSS和DIV高度问题

3 个答案: