javascript - 根据它们的数量在html中对称对齐相同大小的框(divs)

Question

我想制作一个 HTML 页面，其中包含顶部的框和使用 jquery 动态生成的一定数量的框，顶部框底部的框数最多可以为 4。

我想在 html 页面中动态对称地对齐这些框。我正在使用 angularjs 的 ng-repeat 来生成框。我希望框的大小保持不变，但在 html 页面上对称排列它们。

目前我正在使用 angular js 动态创建框并使用 Bootstrap 的 col-md 类对齐它们。但这使得盒子的大小随着盒子数量的变化而改变。

html代码

    <div id="header-wrapper" class="container vscrolling_container">
    <div id="header" class="container vscrolling_container">
        <div id="logo">
                        <h1 class="page-head-line" id="visionh"><a>Vision</a></h1>
                        <p id="visionp"><a rel="nofollow">{{visiontext}}</a></p>
        </div>
    </div>
</div>

    <div class="row" id="missionstart">
        <div ng-class="missioncount[missions.length]" ng-repeat="mission in missions" style="opacity: 0.9">
            <div class="dashboard-div-wrapper" ng-class="bkclr[$index]">
                <h1 id="{{mission.id}}" style="color: #000">{{mission.missionInfo}}</h1>
                <div class="progress progress-striped active">
                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
                    </div>
                <ul>
                    <li id="{{missioncontent.id}}" ng-repeat="missioncontent in mission.missionContent">
                        <p style="text-align: left">{{missioncontent.info}}</p>
                    </li>
                </ul>
            </div>
        </div> 
</div>      

java脚本代码

'use strict';

var mission_vision_mod = angular.module('myApp.mission_vision', ['ngRoute']);

mission_vision_mod.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/mission_vision', {
    templateUrl: 'partials/mission_vision/mission_vision.html',
    controller: 'mission_visionCtrl'
  });
}]);

mission_vision_mod.controller('mission_visionCtrl', ['$scope','$http', function($scope, $http) {
        $scope.visiontext = "Here is the content of vision";
        $scope.bkclr = ['bk-clr-one','bk-clr-two','bk-clr-three','bk-clr-four'];
        $scope.progressbar = ['progress-bar-warning','progress-bar-danger','progress-bar-success','progress-bar-primary'];
        $scope.missioncount = ['col-md-0','col-md-12','col-md-6','col-md-4','col-md-3','col-md-2.5','col-md-2'];

        $http.get('m_id.json').success(function(data){
            $scope.missions = data;
            $scope.len = data.length;
        });
}]);

Answer 1

我创建了一个快速 jsfiddle

HTML 内容:

<div class="container">
    <div class="header"></div>
    <div class="content">
        <div class="contentBox"></div>
        <div class="contentBox"></div>
    </div>
</div>

<br/><br/><br/>

<div class="container">
    <div class="header"></div>
    <div class="content">
        <div class="contentBox"></div>
        <div class="contentBox"></div>
        <div class="contentBox"></div>
        <div class="contentBox"></div>
    </div>
</div>

相关 CSS:

.container div {
    height: 100px;
}
.header {
    border: 1px solid black;
    width: 75%;
    margin: 5px auto;
}
.content {
    text-align: center;
}
.contentBox {
    border: 1px solid black;
    width: 20%;
    display: inline-block;
    box-sizing: border-box;
}

注意:我在这个演示中使用了纯 CSS。

希望对你有帮助。