Question

我有不规则的3号不同大小，我想让它们像示例一样浮动，但没有空格。

html：<ul id="showcase"></ul>

css：

#showcase{
  width: 500px;
}

#showcase li {
  position: relative;
  display: inline-block;
  float: left;
}

#showcase li.large {
  width: 66%;
  height: 150px;
  background-color: red;
}

#showcase li.tiny {
  width: 33%;
  height: 75px;
  background-color: green;
}

#showcase li.portrait {
  width: 33%;
  height: 150px;
  background-color: blue;
}

模拟数据：

jQuery(document).ready(function (){
    recursive(1);
});

function recursive(i){
  if (Number(i) < 40){          
      var rand = Math.floor(Math.random() * 4) + 1;
      var vignette = jQuery("<li><div></div></li>");

      switch(rand) {
      case 1:
          vignette.addClass("large");
          break;
      case 2:
          vignette.addClass("tiny");
          break;
      case 3:
          vignette.addClass("portrait");
          break;
      default:
          vignette.addClass("tiny");
          break;
      }

            vignette.appendTo("#showcase");
      setTimeout(recursive(Number(i)+1),(Math.random() * 10))
  }
};

我希望用第一个可以在空间中输入的元素填充空格。

纯css有可能吗？

Answer 1

您尝试做的事情传统上由javascript处理，通常称为砌体（使用类似this one的库）

如果您想使用纯CSS实现效果而不需要支持旧浏览器，我会考虑使用CSS Flexbox语法

像浮动的东西但是

1 个答案: