Question

我已经完成了2个与我遇到的问题相关的问题。但在这里我创造了一个更好的例子。请看下面。这些框由Angular ng-bind加载。

请参阅以下代码笔： http://codepen.io/anon/pen/LRPwZP

同样，我将相同的代码段包含在stackoverflow中，但请注意，无法调整分辨率，因此，该示例可能没用。

注意到所需的行为非常重要：

每个方框的宽度相同（实际情况下为700px）
希望第1个方框位于左上方。
只有在有足够空间的情况下，希望方框＃2位于方框＃1的右侧。
方框＃3如果屏幕仍然有空格，则在方框2的右侧。
现在，假设框＃3
方框＃4，落在方框＃1的底部。
方框＃5直接位于方框2的底部。
方框＃6直接位于方框＃3的底部。
等......
使用角度ng-bind加载框，并且是动态的。

我无法使用以下选项：

（1）

:nth-child(odd) { float: left; }
:nth-child(even) { float: right; }

原因：无用，当您需要超过2列时失败。

（2）我很清楚AngularJS Masonry，我不想增加加载时间，我想用CSS完成这个。

供参考：

没有使用CSS框架。
Pure＆＃34; Vainilla＆＃34;正在使用JS - 偶尔。
AngularJS使用频繁。

以前的问题，同样的问题：

亲切的问候，克里斯，

Answer 1

为什么不使用flex？

ul{
  background-color: #ffeb00;
  list-style: none;
  padding: 20px;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-around;
}
li{
  padding: 35px;
  margin: 5px;
  background-color: #8056ff;
  color: white;
  text-align: center;
  flex-basis: 40px;
}

<ul>
  <li>Box 1</li>
  <li>Box 2</li>
  <li>Box 3</li>
  <li>Box 4</li>
  <li>Box 5</li>
  <li>Box 6</li>
</ul>

Answer 2

所以，经过几天测试Masonry，Isotope和一些不同的角度和JQuery模块......大多数需要大量的解决方法才能正常运行......并且在尝试了不同的ng-directives和模块之后用户制作的东西，如有角度的砖石，不使用它。我找到了解决方案：AngularMaterial。 https://material.angularjs.org/latest/layout/options可能很明显，但需要时间来理解你有时会寻找什么。

CSS：溢出-x，显示：弹出问题

2 个答案: