Еще один перекрывающийся DIV

Question

Еще один перекрывающийся DIV

0

Есть много дублирующих вопросов 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 для этого?

NMKloster 14 апр. 2014, в 10:27

Источник

0

Элементы могут быть перемещены только влево или вправо, вам нужно пересмотреть, как достичь того, что вы пытаетесь с помощью float: top
Red Taz 14 апр. 2014, в 07:47

Теги:

html

html5

css-float

1 ответ

Ещё вопросы

Элементы могут быть перемещены только влево или вправо, вам нужно пересмотреть, как достичь того, что вы пытаетесь с помощью float: top

paulalexandru · Accepted Answer · 2014-04-14T04-49-00.000Z

Добавьте это в css в свой файл mapimage:

min-height: 250px;

Итак, у вас будет:

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

И это будет выглядеть так, как вы хотите.

Я использовал Chrome <i> Inspect element </ i>, чтобы узнать, что DIV для карты начинается с высоты: 0px. Спасибо за ответ!