CSS重新安排的div在一個正方形狀的方式

Question

我有一個div在我angular2應用如下：

<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。我想以類似方式安排這些箱子，即彼此相鄰的兩個箱子，以及另外兩個箱子像四方形一樣低下。

我該如何做到這一點？

Answer 1

您需要float: left您的箱子，並應用適當的寬度，以您的箱子包裝（如果你需要每行2個箱，比包裝寬度爲2 *（框寬度）+填充+餘量）

.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; 
 
}

<div class="wrapper"> 
 
    <div class="box green"></div> 
 
    <div class="box blue"></div> 
 
    <div class="box red"></div> 
 
    <div class="box yellow"></div> 
 
</div>

Answer 2

Add ng-if屬性在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"></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> 

Answer 3

如果浮動捨棄了一切，然後明確每2n + 1個孩子，你應該能夠堆疊在2秒的箱子，而無需設置任何明確的像素值：

.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; 
 
}

<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>

More information about floating and clearing