divをインラインで作成するにはどうすればよいですか？

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> 

このボックスを行単位で並べる必要があります.1行には名前付き2個のボックスしか含める必要がありません。 私はデモを行います。

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

[]、ボックス2、四角形やBOX1を示す...ボックスの名前です。 問題は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の代わりにuliを使用します。そして、CSSプロパティをul column-count:2に設定します。

float:leftとwidth:50%各部門には、そのdivsは2つの列を設定します。

Answer 3

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 4

質問に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 5

あなたはインラインとレジェンド・ボックスクラスに固定幅と高さを設定する必要があります。

応答性を高めるには、さまざまなメディアクエリに対してこれらのクラスを定義する必要があります。