AngularJS ordnen divs in verschachtelten rechteckigen Weise

Question

Ich habe zwei Arrays, deren Elemente Ich möchte als verschachtelte divs anzuzeigen:

$scope.boxes = [{ 
    id:1, 
    isLit: false, 
    color: 'green' 
}, { 
    id:2, 
    isLit: false, 
    color: 'blue' 
}, { 
    id:3, 
    isLit: false, 
    color: 'red' 
}, { 
    id:4, 
    isLit: false, 
    color: 'yellow' 
}]; 


$scope.images=[ 
{ 
    id:1, path: './img/Baum_grün.png', color:'green' 
}, 
{ 
    id:2, path: './img/Baum_blau.png', color:'blue' 
}, 
{ 
    id:3, path: './img/Baum_rot.png', color:'red' 
}, 
{ 
    id:4, path: './img/Baum_gelb.png', color:'yellow' 
} 
] 

Ich möchte, dass sie Art und Weise in den folgenden anzuordnen (man denke an die Sterne sind Bilder):

Gerade jetzt meine Vorlage sieht wie folgt aus:

<div class="outer-wrapper"> 
    <div class="inner-wrapper"> 
     <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5"> 
     </div> 
    </div> 

    <div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)"> 
     <img src="{{image.path}}"> 
    </div> 
</div> 

Und mein css:

.outer-wrapper { 
    width: 250px; 
} 
.inner-wrapper { 
    width: 200px; 
}  

.box { 
    position: relative;  
    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; 
} 

.lit { 
    opacity: 1.0; 
} 

.image img{ 

    height: 50px; 
    width: 100px; 
    margin-top: 45px; 
    float: right; 
    border: 0.5px solid; 
    margin: 10px; 
} 

Dieser viel Code gibt mir folgendes Ergebnis:

Was und wie soll ich meine css/html ändern das gewünschte Ergebnis zu erzielen, hat es auch ansprechen zumindest bis mittelgroße Bildschirme?

Answer 1

Es ist einfach, wenn Sie flexbox - den neuen Layout-Modus in CSS3 verwenden können. Hier können Sie mehr darüber lesen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Wenn Sie es verwenden können, ist hier, wie Sie es tun könnte:

<div id="first-container"> 
    <div id="a"> 
     a 
    </div> 
    <div id="b"> 
     b 
    </div> 
</div> 

<div id="wrapper"> 
<div id="div-container"> 
    <div id="x"> 
    x 
    </div> 
    <div id="y"> 
    y 
    </div> 
</div> 
<div id="div1-container"> 
    <div id="z"> 
    z 
    </div> 
    <div id="q"> 
    q 
    </div> 
</div> 
</div> 


<div id="second-container"> 
    <div id="c"> 
     a 
    </div> 
    <div id="d"> 
     b 
    </div> 
</div> 

Und die CSS:

#first-container, #second-container { 
    display: flex; 
    justify-content: space-between; 
} 
#wrapper { 
    display: flex; 
    flex-direction: column; 
} 
#div-container, #div1-container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

#a, #c { 
    width: 20%; 
    border: solid 1px #000; 
} 

#b, #d { 
    width: 20%; 
    border: solid 1px #000; 
} 

Auch hier ist eine Arbeits Geige :