网格无法正常工作答案

【问题标题】：Grid not working properly网格无法正常工作
【发布时间】：2015-08-31 21:18:51
【问题描述】：

我正在尝试在 HTML 页面中显示网格。网格是使用角度制作的。在隔离环境中运行时效果很好。但是当我将它与我原来的 Angular 项目合并时，它的布局被扭曲了。

以下是我的代码：

index.html

<html>
<head>
    <title> SiteMan</title>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src = "tree.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.min.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.min.css" type="text/css">
    <link rel= "stylesheet" href="stylesheet.css">


</head>
<body ng-app="myApp">
    <div>
        <div id = "header">
            <h1>Siteman RANN 0.1</h1>
        </div>

        <div id ="nav">
            <button> Add Attribute </button>
            <button> Add User </button>
            <button> Add Doccument </button>
        </div>

        <div id = "aside"  style="padding:5px">

                <button class="link" ng-click="attr=1 ; docs=0 ; user=0">All Attributes</button></br>
                <button class="link" ng-click="user=1 ; attr=0 ; docs=0">All Users</button></br>
                <button class="link" ng-click="docs=1 ; attr=0 ; user=0">All Document Types</button></br>
        </div>


        <div id = "section" ng-controller="mainCtrl">
        </div>

        <div id = "article" ng-controller="gridCtrl">
            <p><strong>Grid with native pagination controls</strong></p>
            <div ui-grid="gridOptions" ui-grid-pagination class="grid" ui-grid-auto-resize>
            </div>

        </div>

        <div id = "footer">
            Copyright &copy; Siteman RANN
        </div>
    </div>
</body>
</html>

tree.js

var app = angular.module("myApp", ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
 app.controller('gridCtrl', ['$scope', '$http', function ($scope, $http) {
            $http.get('users.json').success (function(data){
               $scope.myData = data;
               });
                $scope.gridOptions = {
                data: 'myData',
                paginationPageSizes: [05, 10, 15],
                paginationPageSize: 10,
              columnDefs: [

                    { field : 'name', displayName: 'Name' },
                    { field : 'type',  displayName: 'Type' },
                    { field : 'displayName', displayName: 'DisplayName'}
        ]
      };


    }]);

stylesheet.css

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
    border: 1px solid black;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    color:black;
    text-align:center;
    height:30px;
    padding:5px;
    border: 1px solid black;
}
#aside{
    line-height:20px;
    background-color:#eeeeee;
    height:500px;
    width:20%;
    float:left;
    padding:5px;
    border: 2px solid black;
    overflow: scroll;
}
#section {
    float:left;
    height:150px;
    width:77%;
    padding:10px;
    border: 2px solid black;
    overflow: scroll;
}
a {
    text-decoration: none;
}
#article {
    float:left;
    height:330px;
    width:77%;
    padding:10px;
    border: 2px solid black;
    overflow: scroll;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
    border: 1px solid black;
}
button.link{
    background: none;
    border: none;
}

 .grid {
      width: 800px;
    }

我找不到网格扭曲的原因。救命..!!

【问题讨论】：

你可能想要添加一个示例页面（例如链接到 jsfiddle 或 jsbin）

标签： javascript html angularjs

【解决方案1】：

您padding 没有按照您的想法工作。

只需将box-sizing: border-box 添加到您的代码中即可。

* {
    box-sizing: border-box;  
}

关于 box-sizing 的进一步解释：

Box Sizing | CSS tricks

* {box-sizing: border-box}

【讨论】：

这个在http://ui-grid.info/release/ui-grid-unstable.min.css已经提到了。
@PraveenKumar 那么他可能在加载该 css 时出错。
这是正确的基本 CSS，对我们来说可能是这样，部分加载可能是错误的。对他来说，他的本地电脑应该能正确加载吧？
@PraveenKumar 可能。但我解释了网格破裂的原因。无论如何，删除它，因为它不回答 OP。
如果这是唯一的问题并且 OP 对其进行了排序，我将删除反对票。没有恶意。 :D