Question

我有一个包含任何动态DIV的通用DIV。

例如我有一个宽度为100％的一般div（容器），一般div里面包含10个子div，我需要将10个子div分隔为一般div内的两行。

plot(credrating, cdr)

注意：前5个div应该在一行中，Next 5 div应该在另一行中。有可能动态地这样做吗？感谢您的帮助。

Answer 1

您可以像这样更改css中的显示：

let subject$ = new Rx.BehaviorSubject("a");

subject$
  .concatMap(() => fakeHttp().concat(Rx.Observable.empty().delay(5000)))
  .do(() => subject$.next("a"))
  .subscribe((val) => console.log(val));

和html一样：

.container {
  width: 100%;
  display: block
}

.myClass {
  display: inline-block;
}

Answer 2

我相信你希望div显示在行中并像表格单元格一样包裹。这样的事情。

CSS：

div.container {
  width: 100%;
  border: 1px solid;
  color: white;
}
div.container div {
  background: grey;
  display: inline-block;
  margin: 1px 1px 0 0;
}
div.container.three-per-row div {
  width: calc(100%/3 - 2px);
}
div.container.four-per-row div {
  width: calc(100%/4 - 2px);
}

这是编译的。 JSBIN link is SCSS

Answer 3

您可以使用float css属性：https://developer.mozilla.org/en-US/docs/Web/CSS/float

使用css制作网格的示例： https://css-tricks.com/dont-overthink-it-grids/

如何动态地显示另一个div中的div，如表格中的某些行和列？

3 个答案: