Question

我有两个数组，其元素我想显示为嵌套的div：

$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_grü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'
}
]

我想按照以下方式安排它们（考虑那些星星是图像）：

现在我的模板如下所示：

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

我的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; 
}

这么多代码给了我以下结果：

我应该如何修改我的css / html以达到预期的效果，至少在中等大小的屏幕上也能有所响应？

Answer 1

如果你可以使用flexbox - CSS3中的新布局模式，这很容易。您可以在此处详细了解：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果你可以使用它，你可以这样做：

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

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

此外，这是一个工作小提琴：http://jsfiddle.net/zeLh0foy/72/

Angularjs以嵌套的矩形方式排列div

1 个答案: