CSS，是否可以像windows桌面图标那样对齐元素呢？

Question

我使用的是引导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解决方案。我写了一个littel js助手，我会在这里分享给未来的谷歌人，让我知道你的想法。

<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列，20 gap之间的差距。

对于IE，我不知道。