意外的Div行动

Question

意外的Div行动

我正在尝试使用Div容器进行布局,而我并没有理解为什么Divs按照他们的方式行事.我希望他们排在另一个之下,但这种情况并没有发生.此外,背景颜色没有填补一些Divs正确导致他相信他们继承其他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>

Run Code Online (Sandbox Code Playgroud)

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;
    }

Run Code Online (Sandbox Code Playgroud)

Answer 1

usu*_*oio 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-->

Run Code Online (Sandbox Code Playgroud)

这样他们看起来如下:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，4 月前
查看次数：	167 次
最近记录：	13 年，4 月前