我正在使用 AngularJS 将 div 添加到一个部分,我希望 div 具有静态起始宽度并在我添加更多时动态增长 divs,我该怎么做?
此代码无效:
<body ng-app="plunker" ng-controller="MainCtrl">
<section>
<div ng-repeat="div in divs track by $index">
<div class="square"></div>
</div>
</section>
<button ng-click="add()">add</button>
</body>
section {
border: 1px solid red;
overflow: hidden;
padding: 10px 0;
width: 400px;
}
.square {
width: 100px;
height: 100px;
background: #000;
margin-right: 10px;
float: left;
margin-top: 1em;
}
Plunker 链接:
最佳答案
您需要做的就是: 对于部分:
min-width: 450px; //min width of all blocks that inside your section
display: inline-block; //to make width "grow" with content
对于正方形:
display: inline-block; //instead of float, because float makes height to 0
http://plnkr.co/edit/azOKubY7b371u2Pt7JbD?p=preview
//注意:我将square
类移到了ng-repeat
的父节点上,但不是必须的,你只需要添加display: inline- block ;
如果你想有以前的结构。
关于javascript - CSS AngularJS 使 div 在具有起始静态宽度时动态增长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27530530/