Question

我正在使用bootstrap 3.1.1 - 虽然这可能与我的问题无关。

我希望将<div>垂直放入容器中，就像桌面上的Windows图标的行为一样。如果1列的图标太多，则应将它们推送到新列。

有没有一种方法可以用CSS来完成这项工作，还是需要一个javascript助手？

例如

<div class='container'>

<div class='icon'> 1 </div>
<div class='icon'> 2 </div>
<div class='icon'> 3 </div>
<div class='icon'> 4 </div>
<div class='icon'> 5 </div>
<div class='icon'> 6 </div>

</div>

<style>
    .container{
        width:100%;
        max-height:200px;
    }
    .container.icon{
        width:50px;
        height:50px;
        /*..unknow !..*/
    }
</style>

谢谢：）

当前解决方案：

因为我无法找到任何css解决方案。我写了一个小小的助手来做这件事我将在这里分享给未来的Google员工，让我知道你的想法

<div class='col-xs-9 stretch' id='desktop-icons'>
  <div class='row'>
    <div class='app-icon'>1</div>
    <div class='app-icon'>2</div>
    <div class='app-icon'>3</div>
    <div class='app-icon'>4</div>
    <div class='app-icon'>5</div>
    <div class='app-icon'>6</div>
    <div class='app-icon'>7</div>
  </div>
</div>


<script type="text/javascript">
  var icons=$('#desktop-icons >.row>.app-icon');
  var slice =icons.length
  var colMax=3;

  if(slice > 1){
    console.log('slicing '+slice+' icons'+'into pair of '+colMax);
    for(var i = 0; i < slice; i+=colMax) {
      console.log('wrapping '+(i)+','+(i+colMax));
      icons.slice(i, i+colMax).wrapAll("<div class='col-xs-2'></div>");
    }
  }

</script>

Answer 1

不幸的是，纯CSS似乎不可能。对于小jQuery插件来说似乎是一个有趣的工作。考虑一下我编写的草图：

$.fn.iconizer = function(options) {

    options = $.extend({
        selector: '.icon',
        marginTop: 10,
        marginLeft: 10
    }, options);

    return this.each(function() {

        var $container = $(this),
            $icons = $(options.selector, $container),
            containerHeight = $(this).height(),
            iconHeight = $($icons[0]).height(),
            iconWidth = $($icons[0]).width(),
            numberFit = Math.floor(containerHeight / (iconHeight + options.marginTop)),
            top = 0,
            left = 0;

        $icons.each(function(i) {
            if (i % numberFit == 0 && i > 0) {
                top = 0;
                left += iconWidth + options.marginLeft;
            }
            top = top + options.marginTop;
            $(this).css({
                top: top,
                left: left + options.marginLeft
            });
            top += iconHeight;
        });
    });
};

$('.container').iconizer();

它非常小巧，基本，随意扩展它。

演示：http://jsfiddle.net/Z5snv/

Answer 2

尝试

<div style="transform:rotate(270deg);">
  <div style="transform:rotate(90deg);">top</div>
  <div style="transform:rotate(90deg);">bottom</div>
</div>

http://jsfiddle.net/A5XKp/

Answer 3

对于firefox / chrome / safari你可以使用纯css3

.container { column-count: 3; column-gap: 20px;}

这将创建自动3列，它们之间有20px的间隙对于IE，我不知道。

Answer 4

如果没有javascript，您不能强制内容适合您需要的动态空间。然而安德鲁的答复是一个很好的解决方案，如果你“破解”第一列的图像适合你的div最大高度（编辑w3c示例：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-count 在<div class="newspaper">代码后添加：<img src="hidden_marker_image.gif" height="500" width="1"><br>

列计数它不受IE9支持且降低。

当然，如果您不知道可用的垂直空间，则至少需要一个返回此数字的javascript广告，并将其分配给hidden_marger_image适当的大小。但是，如果您选择javascript，更好的解决方案需要实现“display：table”（table-row，table-cell）行为。

CSS，是否可以像Windows桌面图标行为一样垂直对齐元素？

4 个答案:

演示：http://jsfiddle.net/Z5snv/