Question

我有一个用于创建多个小方框的html代码，该方框的名称来自object(graphdata)。

    <div ng-repeat="a in graphdata" class="inline">

<div class="legend-box"style="background-color:{{a.color}};">
</div>
      <p class="legend-name">
     {{a.projects}}
      </p>
 </div>
   </div>

我需要将这些框对齐成行，一行应该只包含2个带名称的框。我将做一个演示：

  [] box1      [] box2
  [] box3      [] box4
  [] box5      [] box6

[]表示矩形，box1，方框2，...是方框的名称。问题是即时使用ng-repeat。怎么做？

Answer 1

.inline {
     display: inline-block; /*This is the inline, but different*/
     width: 50%; /*You may add less, to accommodate margins*/
     box-sizing: border-box; /*Gets rid of issues with paddings*/
}

Answer 2

要保留你的div并且不使用ul和lis，你可以使用Flex-box！

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

但请注意，因为它仅适用于年轻的浏览器！

你可以这样做：

.parent {
 display: flex;
 align-content: flex-start;
}
.child {
 width: 50%;
}

希望它会有所帮助！

Answer 3

当您使用ionic-framework标记问题时，我将根据Ionic框架功能提供答案。

在Ionic documentation中，您可以找到使用网格布局的示例。

作为一种可能的解决方案，您可以这样做：

<div class="row">
    <div ng-repeat="a in graphdata" class="col col-50">
        <div class="legend-box"style="background-color:{{a.color}};"></div>
        <p class="legend-name">{{a.projects}}</p>
   </div>
</div>

Answer 4

您需要为内嵌和图例框类设置固定的宽度和高度。

为了使其响应，您还需要为不同的媒体查询定义这些类。

Answer 5

使用ul li而不是div。并将css属性设置为ul column-count:2。

或者你可以float:left和width:50%每个div。它将设置div两列。

如何以特定方式进行div内联？

5 个答案: