Question

有很多重叠的DIV个问题，而这里有另一个问题：我想要彼此相邻的3个区块，并且我使用了float: left;功能。我的问题是DIV数字3（ canvaswrapper ）位于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>

发生了什么？我是否应该使用除DIV之外的其他内容？

Answer 1

将这个在css中添加到你的mapimage div：

min-height: 250px;

所以你会：

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

它看起来像你想要的。

另一个重叠的DIV

1 个答案: