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

【问题标题】：How to display css multiple columns with dynamic height如何显示具有动态高度的css多列
【发布时间】：2015-12-12 13:22:43
【问题描述】：

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

我设计的布局是这样的：

但我想这样显示（节省空间）：

我的代码如下所示：

 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。

任何帮助将不胜感激。

【问题讨论】：

请贴一些代码，不仅仅是链接。
放弃表格布局，制作两个类似引导程序的列并将表格放入其中。如果你想按阅读顺序折叠，那将是一个不同的问题。
@gskema：请你详细说明一下。
@nk1 要实现图片中的布局，您必须制作左列（50%, col-sm-6）和右列（50%, col-sm-6）。但问题是您使用的是ng-repeat，它一次输出每个项目，您无法区分它所在的列。我不是角度专家，也许这可以通过某种方式实现，但值得吗？

标签： css multiple-columns

【解决方案1】：

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

【讨论】：

【解决方案2】：

删除了 ng-repeat。

我使用了砖石 jquery。动态附加项目（如砌体文件中所述）。现在它工作得非常好！..

【讨论】：