いくつかの行と列を持つテーブルのようなdiv内のdivを動的に表示する方法はありますか？

Question

私はダイナミックDIVを含む一般的なDIVを持っています。

例では、幅のサイズが100％の一般的なdiv（コンテナ）があります。一般divには10個のchild divが含まれています。一般div内の2つの行として10個のdivを区切ります。

<div id="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
    <div>10</div> 
</div> 

注：最初の5つのdivは1つの行に、次の5つのdivは別の行にある必要があります。 これを動的に行うことは可能ですか？ あなたのお手伝いをよろしくお願いします。

Answer 1

あなたはこのようなCSSの表示を変更することができます。

.container { 
    width: 100%; 
    display: block 
} 

.myClass { 
    display: inline-block; 
} 

と、このようなHTML：

<div class="container"> 
    <div class="myClass">1111111111111111111111111111111111111111111</div> 
    <div class="myClass">222222222222222222222222222222222222222222</div> 
    <div class="myClass">333333333333333333333333333333333333333</div> 
    <div class="myClass">444444444444444444444444444444444444444444444444444</div> 
    <div class="myClass">55555555555555555555555555555555555555</div> 
    <div class="myClass">66666666666666666666666666666666666666666666666666</div> 
    <div class="myClass">7777777777777777777777777777777777777777</div> 
    <div class="myClass">88888888888888888888888888888888888888888888888888</div> 
    <div class="myClass">99999999999999999999999999999999999</div> 
    <div class="myClass">1010101010101010101010101010101010101010101010</div> 
</div> 

Answer 2

私はあなたがdiv要素の行に表示し、テーブルのセルのようにラップしたいと考えています。このようなもの。

CSS：これがコンパイルされ

div.container { 
    width: 100%; 
    border: 1px solid; 
    color: white; 
} 
div.container div { 
    background: grey; 
    display: inline-block; 
    margin: 1px 1px 0 0; 
} 
div.container.three-per-row div { 
    width: calc(100%/3 - 2px); 
} 
div.container.four-per-row div { 
    width: calc(100%/4 - 2px); 
} 

。 JSBIN link is SCSS。

Answer 3

あなたはフロートCSSプロパティを使用することができます：CSSを使用して、グリッドを作るhttps://developer.mozilla.org/en-US/docs/Web/CSS/float

例： https://css-tricks.com/dont-overthink-it-grids/