Question

我制作了这段代码。它工作正常，但问题是，当我调整窗口“map”时，“map”div来自“main”div。我不知道该怎么办。另外我有另一个问题，当我想使用css内容将一个大图像插入“map”div时，图片来自div，因为它太大了，我使用溢出：隐藏;但它不起作用。

<html>
<head>
    <meta charset="UTF-8"/>
    <title>My Real Project</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #container{
            position:absolute;
            width:100%;
            height:auto;
            background-color:darkblue;
        }
        #all{
            position:relative;
            width:75%;
            height:1012px;
            margin: 0 auto;
            background-color:darkred;
        }
        #header{
            position:relative;
            width:98%;
            top:0.8%;
            height:170px;
            margin: 0 auto;
            background-color:lightgreen;
            border-radius:8px;
        }
        #main{
            position:relative;
            width:98%;
            height:640px;
            background-color:orange;
            margin: 0 auto;
            border-radius:8px;
            margin-top:16px;
            margin-bottom:8px;
        }
        #tools{
            position:relative;
            float:left;
            background-color:lightblue;
            width:260px;
            height:97.5%;
            border-radius:8px;
            margin: 8px 8px 8px 8px;
        }
        #map{
            position:relative;
            float:left;
            width:71.3%;
            height:97.5%;
            border-radius:8px;
            background-color:yellow;
            margin: 8px 8px 8px 0px;
        }
        #pic{
            /*content:url(pic.jpg);
            overflow:hidden;*/
        }
        #footer{
            position:relative;
            width:98%;
            height:170px;
            margin: 0 auto;
            background-color:lightblue;
            border-radius:8px;
            margin-top:4px;
        }
    </style>
    <script>

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

在调整窗口大小时，div来自父div

0 个答案: