CSS以类似方式重新排列div

Question

我在angular2应用程序中有如下div：

<div align="center">
   <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)"></div>
   <button class="button button-dark" ng-click="start()">Start</button>
</div>

这看起来像在我的屏幕上：

对应的CSS：

.box {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    margin: 10px;
}

.green {
    background-color: green;
    opacity: 0.3;
}

.blue {
    background-color: blue;
    opacity: 0.3;
}

.red {
    background-color: red;
    opacity: 0.3;
}

.yellow {
    background-color: yellow;
    opacity: 0.3;
}

我不太擅长CSS。我想以方形方式排列这些方框，即两个方框彼此相邻，另外两个方框像foursquare一样。

我怎样才能做到这一点？

Answer 1

你需要Arrays.asList(l);你的盒子并适当的宽度到你的盒子包装（如果你需要每盒2盒，比包装宽度是2 *（盒子宽度）+填充+边缘）

float: left

.wrapper {
  width: 200px;
}
.box {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  margin: 10px;
  float: left;
}
.green {
  background-color: green;
  opacity: 0.3;
}
.blue {
  background-color: blue;
  opacity: 0.3;
}
.red {
  background-color: red;
  opacity: 0.3;
}
.yellow {
  background-color: yellow;
  opacity: 0.3;
}

Answer 2

如果你将所有东西都浮动然后清除每个2n + 1个孩子，你应该能够将这些盒子堆叠成2s，而不需要设置任何明确的像素值：

＆＃13;

＆＃13;

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  overflow: hidden; /* this is so you parent box keeps its dimensions */
}
.box {
  height: 50px;
  width: 50px;
  border: 1px solid black;
  margin: 10px;
  float: left; /* add this to get all boxes onto the same line */
}
button {
  float: left; /* this is so button goes below and not to right of boxes */
}
button,
.box:nth-child(2n + 1) {
  clear: left;   /* add this to make 2 boxes per row and get button on it's own line */
}
.green {
  background-color: green;
  opacity: 0.3;
}
.blue {
  background-color: blue;
  opacity: 0.3;
}
.red {
  background-color: red;
  opacity: 0.3;
}
.yellow {
  background-color: yellow;
  opacity: 0.3;
}

＆＃13;

<div class="clearfix">
  <div class="box green"></div>
  <div class="box blue"></div>
  <div class="box red"></div>
  <div class="box yellow"></div>
  <button class="button button-dark" ng-click="start()">Start</button>
</div>

＆＃13;

＆＃13;

＆＃13;

More information about floating and clearing

Answer 3

在div中添加 ng-if 属性如下，我希望这会对您有所帮助。

<div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-if="$index % 2 == 0"></div>
<div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-if="$index % 2!= 0" class="row"></div>