Question

我正在尝试在HTML页面中显示网格。网格是使用角度制作的。在隔离环境中运行时，它工作正常。但是当我将它与我原来的角度项目合并时，它的布局就会失真。

以下是我的代码：

的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;
    }

我找不到扭曲网格的原因。帮助.. !!

Answer 1

你padding没有像你想象的那样工作。

只需在代码中添加box-sizing: border-box即可。

* {
    box-sizing: border-box;  
}

关于盒子大小的进一步说明：

Box Sizing | CSS tricks

* {box-sizing: border-box}

网格无法正常工作

1 个答案: