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

标签 javascript jquery html css angularjs

我正在使用 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 链接:

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

最佳答案

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

  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/

相关文章:

javascript - 如何防止粘贴到输入的脚本注入(inject)

javascript - 无法使用 jQuery 写入动态 iframe

javascript - 如何使用 jquery $.ajax 重定向到页面

php - 使用php将html表单中的数据插入到mysql数据库中的数据表中

html - 添加第 7 张幻灯片时纯 CSS 幻灯片库出错

javascript - 如何在 Canvas 中获取图像的实际大小?

javascript - Cassandra - 类型错误 : "value" argument is out of bounds

javascript - 单击 react 中的 anchor 标记后将焦点设置在输入元素上

javascript - 在 JavaScript 中成功验证后我无法显示任何消息

javascript - 如何删除除以某个单词开头的文本之外的所有文本?