Html 另一个重叠的DIV_Html_Css Float

Html 另一个重叠的DIV

html

Html 另一个重叠的DIV,html,css-float,Html,Css Float,有很多重叠的DIV问题，下面是另一个：我想要3个块彼此相邻，我使用了float:left功能。我的问题是DIV3号（画布包装器）位于DIV2号（mapimage）之上以下是CSS： div.pagewrapper { text-align: center; } div.clear{ clear:both;} div.mainwrapper { min-width: 800; width: 80%; margin: 0 auto; //overflow: h

有很多重叠的

DIV

问题，下面是另一个：我想要3个块彼此相邻，我使用了

float:left功能。我的问题是DIV
3号（画布包装器）位于DIV
2号（mapimage）之上
以下是CSS：
div.pagewrapper
{
text-align: center;
}

div.clear{ clear:both;}

div.mainwrapper
{
    min-width: 800;
    width: 80%;
    margin: 0 auto;
    //overflow: hidden;
}

div.headerfield
{
    float: top;
    text-align: center;
    min-height: 100px;
    margin: 0 auto;
}

div.infoleft
{
    float: left;
    min-width: 150px;
    min-height: 250px;
    position: relative;
    text-align: left;
    margin: 0 auto;
}

div.mapimage
{
    min-width: 200px;
    position: relative;
    margin: 0 auto;
    float: left;
}

div.canvaswrapper
{
    position: relative;
    min-width: 300px;
    margin: 0 auto;
    float: left;
}

和html：
<html>

    <head>
        <title>TODO title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="VPC.css"/>
    </head>

    <body>
        <div class="pagewrapper" style="background-color: #DDDDDD;">

        <div class="mainwrapper" 
             style="background-color: #BBBBBB">

            <div class="headerfield" 
                 style="background-color: #BBFFBB;">
                <h1>Some top thingy...</h1>
            </div>

            <div class="infoleft" 
                 style="background-color: #BBBBFF;
                        width: 200px;">
                <h3>Some info</h3>
            </div>

            <div class="mapimage" 
                 style="background-color: #FF99FF;
                        width: 220px;">
                <img src="Images/VPC01/VPC01.png" alt="Hole one" 
                     style="position: absolute; top: 0px; left: 0px; width: 200px"/>
            </div>

            <div class="canvaswrapper" 
                 style="background-color: #FFBBBB;
                        width: 300px;">
                <canvas id="courseimg" height="250" width="250"></canvas>
                <script>
                    var canvas = document.getElementById('courseimg');
                    var context = canvas.getContext('2d');
                    var imageObj = new Image();

                    imageObj.onload = function() {
                        context.drawImage(imageObj, 5, 5, 100, 100);
                    };
                    imageObj.src = 'Images/Eye.png';

                </script>
            </div>
        </div>
        </div>
    </body>
</html>


待办事项标题
一些顶级的东西。。。
一些信息
var canvas=document.getElementById（'courseimg'）；
var context=canvas.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.onload=函数（）{
drawImage（imageObj，5,51000）；
};
imageObj.src='Images/Eye.png'；

发生什么事了？我是否应该使用除DIV
s之外的其他工具来执行此操作？
将此添加到css中的mapimage DIV中：
min-height: 250px;

因此，您将有：
div.mapimage
{
    min-width: 200px;
    position: relative;
    margin: 0 auto;
    float: left;
    min-height: 250px;
}

它看起来就像你想要的。
元素只能向左或向右浮动，你需要重新考虑如何通过float:top
实现你想要的效果。我使用Chrome的Inspect元素来发现，地图的DIV
以高度：0px开始。谢谢你的回复！