3

我确信这是我正在做的愚蠢的事情，但是自从我弄乱 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 谢谢！

4

4 回答 4

4

添加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

于 2013-02-02T18:39:21.417 回答
2

不是

height: 200 px; 
height: 200;

但

height: 200px;
于 2013-02-02T18:41:19.193 回答
0

尝试使用以下命令清除 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;}
于 2013-02-02T18:41:32.537 回答
0

此外，您可能希望将样式溢出隐藏到您的 div 中，尤其是对于 Internet Explorer 中的小型 div

style = "overflow: hidden;"

你也可能想下载 reset.css 并将其包含在头部

<link rel = "stylesheet" type = "text/css" href = "css/reset.css"/>
于 2013-02-02T18:46:36.513 回答