Сетка JavaScript в абсолютных значениях - PullRequest
0 голосов
/ 03 октября 2018

Я разрабатываю сетку в javascript и мне нужно, чтобы она работала в абсолютном режиме .. Нет CSS ... потому что я буду использовать логику в другой программе ... у меня возник вопрос, что я сначала сделал элементыбыть добавленным без столбцов ... и теперь, когда я пытаюсь реализовать столбцы, я не могу понять, где мне нужно исправить, чтобы элементы находились в одном столбце без левого интервала ... Может кто-нибудь помочь мне исправить это?

спасибо ...

Здесь 2 ссылки ... Только строки и моя запись Нет столбцов реализовано ...

Этот jsfiddle.net не разрешен

Этот jsfiddle.net - это только строки без столбцов

Здесь мой код для просмотра ....

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>GETTING STARTED WITH BRACKETS</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <style>* {Padding:0px; margin:0px;}</style>
    </head>

    <body style="background-color:darkgrey;">
        <div id="content"></div>

        <script type="application/javascript">

            var GWidth = 400;
            var GHeight = 150;
            var GBorder = 5;
            var GTop = 10;
            var GLeft = 10;
            var GRight = 10;
            var GBottom = 10;

            xGroup = "<div style='margin-top:"+GTop+"px;margin-left:"+GLeft+"px;margin-right:"+GRight+"px;margin-bottom:"+GBottom+"px;width:"+GWidth+"px;height:"+GHeight+"px;background-color:#336699;color:white;text-align:center;absolute:relative;float:left;border:"+GBorder+"px solid white;'>";

        // Baseado em TPL
        var TotalItems = 10;
        var TotalColums = 3;
        var xColum = 1;

        for(x=1;x<=TotalItems;x++)
        {
            if(xColum>TotalColums){xColum=1;}

            var MarLeft = 10;
            var MarTop = 10;
            var BoxBorder = 4;

            var MarRight = MarLeft;
            var MarBottom = MarTop;
            var BoxWidth = (GWidth-BoxBorder*2) / TotalItems - MarLeft
            var BoxHeight = GHeight - (BoxBorder*2) - MarTop

            var PosTop =0;
            var PosLeft = 0;
            var PosRight = PosLeft;
            var PosBottom = PosTop;

            var bgcolor = "D9D9D9"
             if (x % 2 == 0) {bgcolor = "e1e1e1"}

            // GBorder + Divide + BoxBorder
            PosLeft = PosLeft + (GBorder+GLeft) - (MarLeft/2) + (BoxWidth+MarLeft) * (x-1)
            PosTop = PosTop + (GBorder+GTop) - MarTop/2

            if(xColum>1){
                //PosTop = PosTop + BoxHeight + (GBorder+GTop+MarTop) /2
                PosTop = PosTop + BoxHeight*(xColum-1)+ ((GBorder+GTop+MarTop) /2) * (xColum-1)
            }

            xGroup += "<div style='top:"+PosTop+"px; left:"+PosLeft+"px; right:"+PosRight+"px; bottom:"+PosBottom+"px; margin-left:"+MarLeft+"px; margin-right:"+MarRight+"px; margin-bottom:"+MarBottom+"px; margin-top:"+MarTop+"px; width:"+BoxWidth+"px;height:"+BoxHeight+"px;background-color:#"+bgcolor+";color:white;text-align:center;position:absolute;float:left;border:"+BoxBorder+"px solid black;'></div>";    
            xColum++;
            document.getElementById("content").innerHTML = xGroup + "</div>";
        }

</script>

    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...