Question

尝试将HTML页面布局为html noob。我会在我的元素中应用各种不同的风格，而不是到达我需要的位置。

该页面将嵌入到其他人的环境中，这意味着我无法在单独的文件中使用CSS。

HTML：

<div id="both_panes" ng-style="{'display': 'block', 'vertical-align' : 'top', 'position': 'relative' }" ng-app>
<div id="dcr_org_selector" ng-style="{'margin': '1px','display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative', 'top': 0, 'left': 0 }">
<form name="dcr_org" >
  <select id="drc">
  <option value=0>dcr</option>
  </select>
  <select id="org">
  <option value=0>org</option>
  </select>
</form>
</div>

<div id="dcr_vis" ng-style="{'margin': '1px', 'display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative', 'margin-left' : dcrOrgSelWidthPc}">
<div id="dcr_banner" ng-style="{'display': 'block', 'vertical-align' : 'top', 'position': 'relative', 'top': bannerTop, 'margin-left' : dcrOrgSelWidthPc}">
  <div id="dcr_banner_canvas" ng-style="{'margin-left': canvasLeftPercent, 'display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative', 'top': bannerTop}">canvas</div>
  <div id="dcr_banner_rack" ng-style="{ 'margin-left':rackDivLeftPercent, 'display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative', 'top': bannerTop, 'visibility': rackVisibility}">rack</div>
  <div id="dcr_banner_rackCanvas" ng-style="{ 'margin-left': rackCanvasLeftPercent, 'display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative', 'top': bannerTop, 'visibility': rackVisibility}">RackCanvas{{racks[hovered].name}}</div>
</div>
<div id="dcr_main" ng-style="{'margin-left': dcrOrgSelWidthPc,'display': 'block', 'vertical-align' : 'top', 'position': 'relative' 'top': bannerHeightPercent, 'margin-left' : dcrOrgSelWidthPc}">            
  <canvas id="canvas" ng-click="canvasClick($event)" ng-mousemove="canvasHover($event)" ng-style="{'left' : canvasLeftPercent, 'border': '1px gray solid','display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative', 'margin-left' : dcrOrgSelWidthPc}" ></canvas>
  <div id="rack" ng-style="{'left': rackDivLeftPercent, 'position': 'absolute', 'display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative' 'visibility': rackVisibility, 'border': '1px gray solid' }">
  <H3>{{racks[hovered].name}}</H3>
  <ul>
    <li>Weight Used: {{racks[hovered].weight}}</li>
    <li>Weight Threshold: {{racks[hovered].weightThreshold}}</li>
    <li>Weight Utilisation: {{(racks[hovered].weight / racks[hovered].weightThreshold * 100 ) | number:0}}%</li>
    <li>Power Used: {{racks[hovered].power}}</li>
    <li>Weight Threshold: {{racks[hovered].powerThreshold}}</li>
    <li>Weight Utilisation: {{(racks[hovered].power / racks[hovered].powerThreshold * 100 ) | number:0}}%</li>
    </ul>
  </div>
  <canvas id="rack_canvas" ng-click="rackCanvasClick($event)" ng-mousemove="rackCanvasHover($event)" ng-style="{'border': '1px gray solid', 'display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative'}" ></canvas>
  <div id="rack_item" ng-style="{ 'left': itemDivLeftPercent, 'display': 'inline-block', 'vertical-align' : 'top', 'position': 'relative', 'top': itemTop, 'display': 'inline', 'visibility': itemVisibility, 'border': '1px gray solid'">
  {{equipment[equipHovered].name}}
  <ul>
  <li>Weight Used: {{equipment[equipHovered].weight}}</li>
  <li>Power Used: {{equipment[equipHovered].power}}</li>
  <li>Subscriptions:</li>
  </ul>
  </div>
</div>
</div>
</div>

的Javascript

 function CanvasCtrl($scope) {
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 var rack_canvas = document.getElementById('rack_canvas');
 var rack_context = rack_canvas.getContext('2d');


 function getRackSide() {
               return 99;
            }


 function getDoorWidth() {
                return getRackSide() / 5;
            }

 function getUseableWidth() {
                //console.log("self.innerWidth = " + self.innerWidth);
                //return self.innerWidth;
                return document.getElementById("dcr_vis").scrollWidth;
            }

 function getUseableHeight() {
                //console.log("self.innerHeight = " + self.innerHeight);
                //console.log("ScrollHeight = " + document.getElementById("dcr_vis").scrollHeight);
                console.log("window.innerHeight = " + window.innerHeight + " getUseableHeight returns = " + (window.innerHeight - 120));

                //return self.innerHeight;
                return window.innerHeight - 120;
            }


 $scope.canvasClick = function (event) {

            }
 $scope.canvasHover = function (event) {

            }

            // setup

            //divide the horizontal space
            var dcrOrgSelWidthPercent = 20;
            var dcrVisWidthPercent = 100 - dcrOrgSelWidthPercent;
            $scope.dcrOrgSelWidthPc = dcrOrgSelWidthPercent + '%';
            $scope.dcrVisWidthPc = dcrVisWidthPercent + '%';


            //divide the vertical space
            var bannerHeightPercent = 7;
            var mainHeightPercent = 100 - bannerHeightPercent;
            $scope.bannerHeightPercent = bannerHeightPercent + '%';
            $scope.mainHeightPercent = mainHeightPercent + '%';


            //divide the horizontal space within the right side div
            var canvasWidthPc = 50;
            var rackDivWidthPc = 25;
            var rackCanvasWidthPc = 25;
            var itemDivWidthPc = 25; //will go under rackDivWidthPc
            $scope.canvasWidthPercent = canvasWidthPc + '%';
            $scope.rackDivWidthPercent = rackDivWidthPc + '%';
            $scope.rackCanvasWidthPercent = rackCanvasWidthPc + '%';
            $scope.itemDivWidthPercent = itemDivWidthPc + '%';
            $scope.canvasLeftPercent = 0 + '%';
            $scope.rackDivLeftPercent = (0 + canvasWidthPc)  + '%';
            $scope.rackCanvasLeftPercent = (0 + canvasWidthPc + rackDivWidthPc) + '%';
            $scope.itemDivLeftPercent = (0 + canvasWidthPc)  + '%'; 
            canvas.width = document.getElementById("dcr_banner_canvas").clientWidth * canvasWidthPc / 100 ;
            rack_canvas.width = document.getElementById("dcr_banner_rackCanvas").clientWidth * rackCanvasWidthPc / 100;
            var bothCanvasHeight = document.getElementById("dcr_main").clientHeight;
            //console.log('bothCanvasHeight = ' + bothCanvasHeight);
            canvas.height = bothCanvasHeight;
            rack_canvas.height = bothCanvasHeight;

            var bannerTop = 0;


            //$scope.bannerHeight = bannerHeight + 'px';
            var layoutTop = bannerTop + document.getElementById("dcr_banner").clientHeight;


            $scope.verticalSpace = getUseableHeight();// - layoutTop;
            $scope.layoutTop = layoutTop + 'px';
            $scope.bannerTop = bannerTop + 'px'; 


            $scope.hovered = -1;


            //Place the rackDiv
            console.log("set up the rack detail canvas");



            //Place the item div

            $scope.itemTop = bothCanvasHeight /2;


            //$scope.canvasDivHeight = canvas.height -20;
            $scope.clickedRack = -1;
            context.globalAlpha = 1.0;
}

当前输出如下：期望的输出：

任何人都可以提供任何帮助都会非常感激。

编辑：jsFiddle：http://jsfiddle.net/oldskool79/psygx63s/

HTML CSS ng-style被忽略

0 个答案: