Question

我制作了这个html css文件。我想将黄色div（id = map）放入父div（id = main）中，但是这个黄色div不会进入父div。我不知道该怎么办。请帮我解决这个问题。

<html>
<head>
    <meta charset="UTF-8"/>
    <title>My Real Project</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #container{
            position:absolute;
            width:100%;
            height:100%;
        }
        #header{
            position:relative;
            width:1000px;
            height:170px;
            margin: 0 auto;
            background-color:lightgreen;
        }
        #footer{
            position:relative;
            width:1000px;
            height:170px;
            margin: 0 auto;
            background-color:lightblue;
            bottom:0;
        }
        #main{
            position:relative;
            width:1000px;
            height:600px;
            background-color:darkred;
            margin: 0 auto;
            z-index:1;
        }
        #tools{
            position:relative;
            left:0;
            background-color:orange;
            width:260px;
            height:100%;
            z-index:2;
        }
        #map{
            position:relative;
            right:0;
            width:740px;
            height:100%;
            z-index:2;
            background-color:yellow;
        }
    </style>
    <script>

    </script>
</head>
<body>
    <div id="container">
        <div id="header">Place the header here</div>
        <div id="main">
            <div id="tools">Tools</div>
            <div id="map">Map</div>
        </div>
        <div id="footer">Place the footer here</div>
    </div>
</body>

Answer 1

您只需在float:left和tools CSS中添加map：

#tools{
        position:relative;
        left:0;
        background-color:orange;
        width:260px;
        height:100%;
        z-index:2;
        float:left;
    }
    #map
    {
        float:left;
        position:relative;
        right:0;
        width:740px;
        height:100%;
        z-index:2;
        background-color:yellow;
    }

<强> Fiddle

Answer 2

当你使用位置相对于它不工作left: 0;时，你可以设置浮动它们：
像这样：

    #tools{
        background-color:orange;
        width:260px;
        height:100%;
        float:left;
    }
    #map{
        width:740px;
        height:100%;
        background-color:yellow;
        float: left
    }

Answer 3

您可以在min-height:600px;

中尝试#main{}

Answer 4

fiddle

CSS

    *{
            margin:0;
            padding:0;
        }
        #container{
            position:absolute;
            width:100%;
            height:100%;
        }
        #header{
            position:relative;
            width:1000px;
            height:170px;
            margin: 0 auto;
            background-color:lightgreen;
        }
        #footer{
            position:relative;
            width:1000px;
            height:170px;
            margin: 0 auto;
            background-color:lightblue;
            bottom:0;
        }
        #main{
            position:relative;
            width:1000px;
            height:600px;
            background-color:blue;
            margin: 0 auto;
            overflow: hidden;
        }
        #tools{
            position:relative;
            left:0;
            background-color:orange;
            width:260px;
            height:100%;
            float:left;
}
        #map{
            position:relative;
            right:0;
            width:740px;
            height:100%;
            background-color:yellow;
        }
#footer{
    background-color: red;
}

div.inner-div{
    float:left;
}


<div id="container">
        <div id="header">Place the header here</div>
        <div id="main">
            <div id="tools" class="inner-div">Tools</div>
            <div id="map" class="inner-div">Map</div>
        </div>
        <div id="footer">Place the footer here</div>
    </div>

Div不会插入父div

4 个答案: