如何显示 css 具有动态高度的多列

Question

我正在显示模板以在显示器上显示它。

我设计的布局是这样的：

但是我想这样显示（为了节省space）：

我的代码如下所示：

 var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

$scope.businessObject =
    [
    {
        CompanyName: "AA",
        StockWaringItemsCount: 0,
        Items: [
       {
           ToolNumber: "200", ItemName: "Item 1 GREY", UOM: "PCs", MinStockLevel: 100, Stock: 5000
       }
        ]
    },
      {
          CompanyName: "BB",
          StockWaringItemsCount: 1,
          Items: [
       { ToolNumber: "111", ItemName: "Item 1", UOM: "", MinStockLevel: 200, Stock: 150 },
       { ToolNumber: "222", ItemName: "Item 2", UOM: "", MinStockLevel: 300, Stock: 400 },
       { ToolNumber: "333", ItemName: "Item 3", UOM: "", MinStockLevel: 400, Stock: 200 },
          ]
      },
     {
         CompanyName: "AutoLive",
        StockWaringItemsCount: 1000,
         Items: [
     { ToolNumber: "111", ItemName: "Item 222", UOM: "", MinStockLevel: 500, Stock: 5000 },
      { ToolNumber: "222", ItemName: "Item 444", UOM: "", MinStockLevel: 600, Stock: 5000 },
       { ToolNumber: "333", ItemName: "Item 252", UOM: "", MinStockLevel: 700, Stock: 5000},
          ]
      }
    ];
});

<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body ng-controller="myCtrl">

<div class="container">
    <div ng-repeat="company in businessObject" class="col-sm-12 col-md-6 col-lg-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <a href="#" class="btn btn-sm btn-hover btn-info">{{company.CompanyShortID}}</a>
              <div class="pull-right">
                    <div ng-show="company.StockWarnigItemsCount>0">
                        <span class="badge" style="color: Red">{{company.StockWarnigItemsCount}}</span>
                    </div>
                    <span class="glyphicon glyphicon-ok-circle" ng-show="company.StockWarnigItemsCount===0">
                    </span>
                </div>
                <div class="clearfix">
                </div>
            </div>
            <div class="panel-body">

                <table class="table table-condensed" style="margin-bottom: 0px;">
                    <thead>
                        <tr>
                            <th>
                                Tool
                            </th>
                            <th style="width: 60%">
                                Item
                            </th>
                            <th style="text-align: center">
                                Min
                            </th>
                            <th style="text-align: center">
                                Stock
                            </th>
                            <th style="text-align: center">
                                Status
                            </th>
                        </tr>
                    </thead>
                    <tr ng-repeat="item in company.Items">
                        <td>
                            {{item.ToolNumber}}
                        </td>
                        <td>
                            {{item.ItemName}}
                        </td>
                        <td style="text-align: right">
                            {{item.MinStockLevel}}
                        </td>
                        <td style="text-align: right">
                            {{item.Stock}}
                        </td>
                        <td style="text-align: center">
                           

                        </td>
                    </tr>
                </table>
            </div>
        </div>

    </div>

</div>

我正在使用 angularjs 和 bootstrap。

如有任何帮助，我们将不胜感激。

Answer 1

将float: left添加到这些元素的CSS。
但是，它仍然取决于元素的顺序，如果它们按照您显示的方式出现（您可能必须更改顺序 - 在这种情况下，顺序是顶部、左下、右上、右下）

Answer 2

删除了 ng-repeat。

我用过砌体jquery。动态附加项目（如砖石文档中所述）。现在一切正常！..

如何显示 css 具有动态高度的多列

How to display css multiple columns with dynamic height

css

multiple-columns