Html 包装非浮动元素

我有这样一个元素列表：

<div class="row">
  <div class="col-xs-12 row-title">
    <h1>Equal size items</h1>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      1
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      2
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      3
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      4
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      5
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      6
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      7
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      8
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      9
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      10
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      11
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      12
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      13
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      14
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      15
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      16
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      17
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      18
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      19
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      20
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      21
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      22
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      23
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      24
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      25
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      26
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      27
    </div>
  </div>
</div>

<div class="row flex-column">
    <div class="col-xs-12 row-title">
        <h1>Equal size items</h1>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            1
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            2
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            3
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            4
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            5
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            6
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            7
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            8
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            9
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            10
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            11
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            12
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            13
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            14
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            15
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            16
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            17
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            18
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            19
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            20
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            21
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            22
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            23
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            24
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            25
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            26
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            27
        </div>
    </div>
</div>

.directive('flexColumn', ['$window', '$timeout', function ($window, $timeout) {

    // Resize the container
    var resize = function (element, width) {

        // If our width > 992
        if (width > 992) {

            // Resize our element
            setHeight(element);

            // Otherwise
        } else {

            // Set our element width and height to auto
            element.css('height', 'auto');
            element.css('width', 'auto');
        }
    };

    // Gets the height to minus off the total
    var getHeight = function (element) {

        // Declare our variables
        var height = 0,
            children = element.children(),
            loopChildren = element.hasClass('row');

        // Loop through the element children
        for (var i = 0; i < children.length; i++) {

            // Get the child
            var child = angular.element(children[i]);

            // If the child is not a column
            if (!child.hasClass('flex-column')) {

                // If we need to loop the children
                if (loopChildren) {

                    // Get the height of the children
                    height += getHeight(child);

                    // Otherwise
                } else {

                    // Add the height of the child to 
                    height += child[0].offsetHeight;
                }
            }
        }

        // Return our height
        return height;
    };

    // Sets the height of the element
    var setHeight = function (element) {

        // Declare our variables
        var row = element.parent().parent(),
            height = 780;

        // If our row is a row
        if (row.hasClass('row')) {

            // Get the height of the rest of the items
            height = height - getHeight(row);
        }

        // Set our elements height
        element.css('height', height + 'px');

        // After we set the height, set the width
        setWidth(element);
    }

    // Sets the width of the element
    var setWidth = function (element) {

        // After a short period
        $timeout(function () {

            // Get our last child
            var children = element.children(),
                length = children.length,
                lastChild = children[length - 1];

            // Work out the width of the container
            var position = element[0].getBoundingClientRect(),
                childPosition = lastChild.getBoundingClientRect(),
                width = childPosition.left - position.left + childPosition.width;

            //console.log('--------------------------------');
            //console.log(lastChild);
            //console.log(position);
            //console.log(childPosition);
            //console.log(width);
            //console.log('--------------------------------');

            // Apply the width to the element
            element.css('width', width + 15 + 'px');
        }, 500);
    };

    return {
        restrict: 'C',
        link: function (scope, element, attrs) {

            // Get our window
            var window = angular.element($window),
                width = $window.innerWidth;

            // Bind to the resize function
            window.bind('resize', function () {

                // After half a second
                $timeout(function () {

                    // Get the window width
                    width = $window.innerWidth;

                    // Resize our element
                    resize(element, width);
                }, 500);
            });

            // Watch the children
            scope.$watch(function () {

                // Watch for changes in the children
                return element.children().length;

                // If our length changes
            }, function (length) {

                // Resize our element regardless of the value
                resize(element, width);
            });

            // Apply our resize
            resize(element, width);
        }
    };
}])

等尺寸项目
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

它们不是浮动的，所以它们彼此堆叠在一起，这就是我想要的。 包含的.row的高度集为500px。如果“列”超过容器的高度，我希望将其换行。如果可能的话，我想用CSS来做这件事

以下是显示问题的图像：

下面是一个代码笔示例，您可以看到我的问题：

有人知道这是否可以用CSS解决吗

.row
{
    height:500px;
    overflow:hidden;
    display:inline-block;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

您必须手动调整

高度

和

列计数

可能

---

这是纯CSS无法解决的。 我不得不使用自定义指令来解决这个问题。 如果其他人有这个问题，并且正在使用AngularJS和bootstrap，我就是这样解决的

首先，我在行中添加了一个新类，如下所示：

<div class="row">
  <div class="col-xs-12 row-title">
    <h1>Equal size items</h1>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      1
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      2
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      3
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      4
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      5
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      6
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      7
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      8
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      9
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      10
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      11
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      12
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      13
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      14
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      15
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      16
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      17
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      18
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      19
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      20
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      21
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      22
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      23
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      24
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      25
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      26
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      27
    </div>
  </div>
</div>

<div class="row flex-column">
    <div class="col-xs-12 row-title">
        <h1>Equal size items</h1>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            1
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            2
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            3
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            4
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            5
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            6
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            7
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            8
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            9
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            10
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            11
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            12
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            13
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            14
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            15
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            16
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            17
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            18
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            19
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            20
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            21
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            22
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            23
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            24
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            25
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            26
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            27
        </div>
    </div>
</div>

.directive('flexColumn', ['$window', '$timeout', function ($window, $timeout) {

    // Resize the container
    var resize = function (element, width) {

        // If our width > 992
        if (width > 992) {

            // Resize our element
            setHeight(element);

            // Otherwise
        } else {

            // Set our element width and height to auto
            element.css('height', 'auto');
            element.css('width', 'auto');
        }
    };

    // Gets the height to minus off the total
    var getHeight = function (element) {

        // Declare our variables
        var height = 0,
            children = element.children(),
            loopChildren = element.hasClass('row');

        // Loop through the element children
        for (var i = 0; i < children.length; i++) {

            // Get the child
            var child = angular.element(children[i]);

            // If the child is not a column
            if (!child.hasClass('flex-column')) {

                // If we need to loop the children
                if (loopChildren) {

                    // Get the height of the children
                    height += getHeight(child);

                    // Otherwise
                } else {

                    // Add the height of the child to 
                    height += child[0].offsetHeight;
                }
            }
        }

        // Return our height
        return height;
    };

    // Sets the height of the element
    var setHeight = function (element) {

        // Declare our variables
        var row = element.parent().parent(),
            height = 780;

        // If our row is a row
        if (row.hasClass('row')) {

            // Get the height of the rest of the items
            height = height - getHeight(row);
        }

        // Set our elements height
        element.css('height', height + 'px');

        // After we set the height, set the width
        setWidth(element);
    }

    // Sets the width of the element
    var setWidth = function (element) {

        // After a short period
        $timeout(function () {

            // Get our last child
            var children = element.children(),
                length = children.length,
                lastChild = children[length - 1];

            // Work out the width of the container
            var position = element[0].getBoundingClientRect(),
                childPosition = lastChild.getBoundingClientRect(),
                width = childPosition.left - position.left + childPosition.width;

            //console.log('--------------------------------');
            //console.log(lastChild);
            //console.log(position);
            //console.log(childPosition);
            //console.log(width);
            //console.log('--------------------------------');

            // Apply the width to the element
            element.css('width', width + 15 + 'px');
        }, 500);
    };

    return {
        restrict: 'C',
        link: function (scope, element, attrs) {

            // Get our window
            var window = angular.element($window),
                width = $window.innerWidth;

            // Bind to the resize function
            window.bind('resize', function () {

                // After half a second
                $timeout(function () {

                    // Get the window width
                    width = $window.innerWidth;

                    // Resize our element
                    resize(element, width);
                }, 500);
            });

            // Watch the children
            scope.$watch(function () {

                // Watch for changes in the children
                return element.children().length;

                // If our length changes
            }, function (length) {

                // Resize our element regardless of the value
                resize(element, width);
            });

            // Apply our resize
            resize(element, width);
        }
    };
}])

然后我创建了一个限制为类名的指令，如下所示：

<div class="row">
  <div class="col-xs-12 row-title">
    <h1>Equal size items</h1>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      1
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      2
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      3
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      4
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      5
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      6
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      7
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      8
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      9
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      10
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      11
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      12
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      13
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      14
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      15
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      16
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      17
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      18
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      19
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      20
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      21
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      22
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      23
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      24
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      25
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      26
    </div>
  </div>
  <div class="col-md-2 col-sm-4 col-xs-6 tile">
    <div class="box-row">
      27
    </div>
  </div>
</div>

<div class="row flex-column">
    <div class="col-xs-12 row-title">
        <h1>Equal size items</h1>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            1
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            2
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            3
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            4
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            5
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            6
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            7
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            8
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            9
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            10
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            11
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            12
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            13
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            14
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            15
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            16
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            17
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            18
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            19
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            20
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            21
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            22
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            23
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            24
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            25
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            26
        </div>
    </div>
    <div class="col-md-2 col-sm-4 col-xs-6 tile">
        <div class="box-row">
            27
        </div>
    </div>
</div>

.directive('flexColumn', ['$window', '$timeout', function ($window, $timeout) {

    // Resize the container
    var resize = function (element, width) {

        // If our width > 992
        if (width > 992) {

            // Resize our element
            setHeight(element);

            // Otherwise
        } else {

            // Set our element width and height to auto
            element.css('height', 'auto');
            element.css('width', 'auto');
        }
    };

    // Gets the height to minus off the total
    var getHeight = function (element) {

        // Declare our variables
        var height = 0,
            children = element.children(),
            loopChildren = element.hasClass('row');

        // Loop through the element children
        for (var i = 0; i < children.length; i++) {

            // Get the child
            var child = angular.element(children[i]);

            // If the child is not a column
            if (!child.hasClass('flex-column')) {

                // If we need to loop the children
                if (loopChildren) {

                    // Get the height of the children
                    height += getHeight(child);

                    // Otherwise
                } else {

                    // Add the height of the child to 
                    height += child[0].offsetHeight;
                }
            }
        }

        // Return our height
        return height;
    };

    // Sets the height of the element
    var setHeight = function (element) {

        // Declare our variables
        var row = element.parent().parent(),
            height = 780;

        // If our row is a row
        if (row.hasClass('row')) {

            // Get the height of the rest of the items
            height = height - getHeight(row);
        }

        // Set our elements height
        element.css('height', height + 'px');

        // After we set the height, set the width
        setWidth(element);
    }

    // Sets the width of the element
    var setWidth = function (element) {

        // After a short period
        $timeout(function () {

            // Get our last child
            var children = element.children(),
                length = children.length,
                lastChild = children[length - 1];

            // Work out the width of the container
            var position = element[0].getBoundingClientRect(),
                childPosition = lastChild.getBoundingClientRect(),
                width = childPosition.left - position.left + childPosition.width;

            //console.log('--------------------------------');
            //console.log(lastChild);
            //console.log(position);
            //console.log(childPosition);
            //console.log(width);
            //console.log('--------------------------------');

            // Apply the width to the element
            element.css('width', width + 15 + 'px');
        }, 500);
    };

    return {
        restrict: 'C',
        link: function (scope, element, attrs) {

            // Get our window
            var window = angular.element($window),
                width = $window.innerWidth;

            // Bind to the resize function
            window.bind('resize', function () {

                // After half a second
                $timeout(function () {

                    // Get the window width
                    width = $window.innerWidth;

                    // Resize our element
                    resize(element, width);
                }, 500);
            });

            // Watch the children
            scope.$watch(function () {

                // Watch for changes in the children
                return element.children().length;

                // If our length changes
            }, function (length) {

                // Resize our element regardless of the value
                resize(element, width);
            });

            // Apply our resize
            resize(element, width);
        }
    };
}])

.directive（'flexColumn'，['$window'，'$timeout'，函数（$window，$timeout）{
//调整容器的大小
var resize=函数（元素、宽度）{
//如果我们的宽度>992
如果（宽度>992）{
//调整元素的大小
设置高度（元素）；
//否则
}否则{
//将元素宽度和高度设置为“自动”
css（'height'，'auto'）；
css（'width'，'auto'）；
}
};
//获取要减去总高度的高度
var getHeight=函数（元素）{
//声明我们的变量
变量高度=0，
children=element.children（），
loopChildren=element.hasClass（'row'）；
//循环遍历元素子元素
对于（变量i=0；i

对我不起作用，它从元素中间切断元素。我的代码笔已经更新，显示不，也不会工作，因为您正在设置容器的宽度。我需要它自己扩展。我能得到的最接近的…这有帮助吗-