Question

这可能会在某处得到解答，但我不确定术语，因为我不熟悉Web开发。我正在使用mean.js应用程序，我有一个我正在填充的容器：

<div class="container-fluid">
  <div class="col-sm-4 col-md-6 col-lg-4">
     <div class="panel" ng-repeat='item in itemList'>
      {{item.content}}
     </div>
  </div>
</div>

但我实际上并不希望col尺寸符合那里的规定。我想将面板大小设置为一个设置大小，例如每个面板150px X 150px，我希望行根据屏幕的分辨率填充列。因此，如果列到达屏幕的末尾，我希望它只在这种情况下开始一个新行。例如，如果我有10个面板，而某人有1500px宽的窗口，它只会显示1行，但随着它们缩小窗口，它将重新调整，直到最终每行只显示1个面板。

希望这是可能的，但任何建议都将不胜感激！

Answer 1

为这些内框设置display:inline-block。这将确保盒子占用一排的所有可用空间，之后，它将进入下一行

.c-panel {
  width: 150px;
  height: 150px;
  background: red;
  margin: 5px;
  display: inline-block;
}

<div class="container-fluid">
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div class="c-panel"></div>
  <div>

基于窗口大小AngularJs的动态列css

1 个答案: