以嵌套的角度方式排列div

Question

在我的角度项目中，我想以下列方式显示div：

我的HTML如下所示：

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

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

我的css：

.outer-wrapper {
    position: fixed;
    top: 160%;
    left: 32%;
    width: 300px;
    height: 300px;
    background-color: #ddd;
}
.inner-wrapper {  
    position: fixed;
    top: 300%;
    left: 40%;
    width: 150px;
    height: 150px;
    background-color: #9e9e9e;
}


.box {
    position: relative;    
    height: 50px;
    width: 50px;
    border: 1px solid black;
    margin: 12px;
    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{
    position: relative;
    top: 0px;
    height: 83px;
    width: 83px;
}

.image img{
    position: relative;
    height: 50px;
    width: 70px;
    float: left;
    border: 0.5px solid;
}

这给我的结果如下：

我应该如何修改我的html / css以在角落处安排这些图像？这些div也需要响应。

Answer 1

  

我希望此示例可以帮助您[全屏打开]

        var app = angular.module("app", []);

        app.controller("ctrl", function ($scope) {

            $scope.boxes = [
                { color: "green" },
                { color: "red" },
                { color: "blue" },
                { color: "yellow" }
            ];

            $scope.images = [
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWoMAAtUUhw" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWoMAAtUUhw" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWoMAAtUUhw" },
                { path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6ICxryy88p63-Lno8jlzrMR1CsmiB6c3v_35J513QWoMAAtUUhw" }
            ];
        });

 .holder {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .inner-wrapper {
            height: 200px;
            width: 200px;
            background-color: #9e9e9e;
            padding: 10px;
            position: relative;
        }

            .inner-wrapper .box {
                width: 45%;
                height: 45%;
                display: inline-block;
                padding: 0;
                margin: 0 5px 16px;
            }

                .inner-wrapper .box.red {
                    background-color: red;
                }

                .inner-wrapper .box.yellow {
                    background-color: yellow;
                }

                .inner-wrapper .box.blue {
                    background-color: blue;
                }

                .inner-wrapper .box.green {
                    background-color: green;
                }

            .inner-wrapper .outer-wrapper .image {
                width: 100px;
                height: 100px;
                position: absolute;
                margin: 0;
            }

                .inner-wrapper .outer-wrapper .image:nth-child(1) {
                    top: -120px;
                    left: -100px;
                }

                .inner-wrapper .outer-wrapper .image:nth-child(2) {
                    top: -120px;
                    right: -100px;
                }

                .inner-wrapper .outer-wrapper .image:nth-child(3) {
                    bottom: -120px;
                    right: -100px;
                }

                .inner-wrapper .outer-wrapper .image:nth-child(4) {
                    bottom: -120px;
                    left: -100px;
                }

                .inner-wrapper .outer-wrapper .image img {
                    width: 100%;
                    border: solid 1px #ccc;
                }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <title></title>
    <meta charset="utf-8" />
    
</head>
<body>
    <div class="holder">
        <div class="inner-wrapper">
            <div class="box {{box.color}}" ng-repeat="box in boxes"></div>

            <div class="outer-wrapper">
                <div class="image" ng-repeat="image in images">
                    <img ng-src="{{image.path}}">
                </div>
            </div>
        </div>
    </div>
    </body>
</html>