包裹非浮动元素

Question

我有一个像这样的元素列表：

<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>

它们没有漂浮，所以它们堆叠在一起，这就是我想要的。 包含 .row 的高度设置为500px。我想要＆＃34;列＆＃34;如果它们超过容器的高度，则换行。如果可能的话，我想用CSS做到这一点。

以下是显示问题的图片：

这是一个codepen示例，因此您可以看到我的问题：

http://codepen.io/r3plica/pen/xGorZR?editors=110

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

Answer 1

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

您必须手动调整height和column-count JsFiddle
New JsFiddle

Answer 2

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

首先，我在这个行中添加了一个新类：

<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>

这方面的CSS很简单：

.flex-column {
    display: -webkit-box; /* Safari */
    display: flex;

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

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

.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);
        }
    };
}])