CSS AngularJS 使 div 在具有起始静态宽度时动态增长答案

【问题标题】：CSS AngularJS make a div grow dynamically when it has starting static widthCSS AngularJS 使 div 在具有起始静态宽度时动态增长
【发布时间】：2014-12-18 02:05:15
【问题描述】：

我正在使用 AngularJS 将 divs 添加到一个部分，并且我希望 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 链接：

http://plnkr.co/edit/SqGXBh9zXK2P3LCIVOPG?p=preview

【问题讨论】：

css 还不够吗？最小宽度 + 宽度 + 显示：块
你在 plunker 中看到它不是

标签： javascript jquery html css angularjs

【解决方案1】：

您需要做的就是：对于部分：

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

【讨论】：

【解决方案2】：

您也可以通过在section 上使用float:left 来完成此操作：

section {
  border: 1px solid red;
  padding: 10px 0;
  float:left;
}

并制作squares 的直系后代，这实际上会填满section：

<section>
   <div class="square"ng-repeat="div in divs track by $index"></div>
</section>

Plnkr

【讨论】：