Question

我确信这是我正在做的蠢事，但是因为我搞砸CSS已经有一段时间了。而对于我的生活，我无法弄清楚为什么div框没有显示正确的高度（如CSS中所指定的）......以及为什么在标题div和列之间存在黑色空格块。

任何帮助都会非常感激！我知道这很简陋，我只是试图让主要布局失效。

感谢您的帮助!! CSS：

#container { width: 1000px; margin: 30px auto 60px;}

    h1 { text-align: center;}

    #header { height: 200 px; width: 1000 px;  background-color: #993300}
    #mcol1 { height: 600; width: 500px; float: left; background-color: #2a9c3b;}
    #mcol2 { height: 600; width: 500px; float: left; background-color: #996666;}

HTML：

<div id="container">

<div id="header">
<h1> Name</h1>
</div>
<div id="mcol1">
<h1>Test1</h1>
</div>

<div id="mcol2">
<h1>Test2</h1>
</div>
</div>

</body>

由于我不能直接发布图片因为我是新手，所以这里有一个链接显示它：http://imgur.com/gW0vY7a 谢谢！

Answer 1

将 px 添加到每个高度值：

#header { height: 200px; width: 1000px;  background-color: #993300}
#mcol1 { height: 600px; width: 500px; float: left; background-color: #2a9c3b;}
#mcol2 { height: 600px; width: 500px; float: left; background-color: #996666;}

jsfiddle

Answer 2

不

height: 200 px; 
height: 200;

但是

height: 200px;

Answer 3

尝试使用以下方法清除mcol1和mcol2上的浮点数：

          <!-- html -->
          <div id="container">

            <div id="header">
              <h1> Name</h1>
            </div>
            <div id="mcol1">
              <h1>Test1</h1>
            </div>

            <div id="mcol2">
              <h1>Test2</h1>
            </div>
            <div class="clear"></div>
           </div>

           <!-- css -->
           .clear{
             clear:both;
             height:0;
             line-height:1px;
           }
            #mcol1 { height: 600px; width: 500px; float: left; background-color:#2a9c3b;}
            #mcol2 { height: 600px; width: 500px; float: left; background-color: #996666;}

Answer 4

此外，您可能希望为您的div添加隐藏的样式溢出，尤其是对于Internet Explorer中的小div;

style = "overflow: hidden;"

您也可以下载reset.css并将其包含在头部

中

<link rel = "stylesheet" type = "text/css" href = "css/reset.css"/>

Div标签的高度被忽略

4 个答案: