1

我正在尝试使用 Div 容器进行布局，但我不明白为什么 Div 会以它们的方式行事。我原以为他们会排成一排，但这并没有发生。此外，背景颜色没有正确填充某些 div，导致他相信它们正在继承其他 div 的属性。有人能告诉我们在这个简单的例子中我哪里出错了吗？谢谢你。

HTML

<?php
// Inialize session
session_start();
// Check, if username session is NOT set then this page will jump to login page
require_once 'check_login.php';

?>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link href="style_wide.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container"> 

        <div id="toolbar_top"> </div> <!--end div toolbar-->


        <div id ="content"> 
            <div id = "map_canvas"><div> <!--end div map_canvas-->
            <div id="form_get_date">   <div> <!--end div form_get_date-->       
        </div> <!--end div content-->  


        <div id ="footer"> </div> <!--end div footer-->

    </div> <!--end div container-->
</body>
</html>

CSS

 html { height: 100%; }
body, html { min-height: 100%; height: 100%;margin : 0;
    padding : 0; }



body {
    width:100%;
    background : #F5F5FF; 
    }

#container {
    min-height: 100%;
    width : 100%;
    border-style: solid;
    border-width:1px;
    background  #FFFFCC;
    -moz-box-shadow: 10px 10px 5px #888888; /* shadow border */
    box-shadow: 10px 10px 5px #888888;
    }



#toolbar_top {
    border: solid 1px;
    height : 25px;
    background : red;
    }    



#content {
    min-height: 100%; /* need this */
    height: 100%;   /* and this, to get content div to stretch to bottom of page in Firefox */
    margin-bottom : 25px;background : #FFEBCC;
    color : #666;
    border: solid 1px;
    background:blue;
    }


#footer {
    clear:both;
    height:25px;
    position:absolute;
    bottom: 0;
    background : red;
    border: solid 1px;
    } 



#map_canvas {
    margin: 20;
    padding: 0;
    background:white;
    height: 400px;
    border: 1px solid;
    }

#form_get_date  {
    height:100px;
    border:solid;
    }
4

1 回答 1

5

难道是你想关闭这些DIV

 <div id ="content"> 
    <div id = "map_canvas"><div> <!--end div map_canvas-->
    <div id="form_get_date">   <div> <!--end div form_get_date-->       
 </div> <!--end div content-->

这样它们看起来如下：

 <div id ="content"> 
        <div id = "map_canvas"></div> <!--end div map_canvas-->
        <div id="form_get_date">   </div> <!--end div form_get_date-->       
 </div> <!--end div content-->
于 2012-10-07T18:55:16.513 回答