Question

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

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

目前我使用角度js动态创建框并使用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

flexbox可以做到这一点

.wrap {
  width: 80%;
  margin: auto;
  border: 1px solid black;
  margin-bottom: 25px;
}
.top,
.item {
  width: 100px;
  height: 50px;
  background: red;
}
.top {
  display: inline-block;
}
.flex {
  display: flex;
  justify-content: space-around;
}

<div class="wrap">
  <div class="flex">
    <div class="top"></div>
  </div>
  <div class="flex">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

JSfiddle Demo

Answer 2

我创建了一个快速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>

根据数字对称地对齐html中相同大小的框（div）

2 个答案: