CSS divs in einem Quadrat artig

Question

Neuanordnung habe ich ein div wie in meinem angular2 Anwendung folgt:

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

Das ist wie folgt auf meinem Bildschirm aussieht:

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

Ich bin nicht so gut in CSS. Ich möchte diese Kästen auf eine quadratische Art und Weise anordnen, d. H. Zwei Kästen nebeneinander und zwei andere, die wie viereckig sind.

Wie kann ich das erreichen?

Answer 1

Sie benötigen Boxen float: left und richtige Breite zu Ihrer Frachten Wrapper anwenden (wenn Sie pro Zeile 2 Boxen benötigen, als Wrapper Breite 2 * (box Breite) + Polsterung + Marge)

.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

Fügen Sie ng-wenn Attribut in Div wie folgt, ich hoffe, das wird Ihnen helfen.

<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

Wenn Sie alles schweben gelassen und dann klar jeder 2n + 1 Kind, sollten Sie in der Lage sein, die Kisten in 2s, ohne die Notwendigkeit zu stapeln für alle expliziten Pixelwerte Einstellung:

.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