CSSの場所N divsインラインブロックの列単位（垂直方向）

Question

以下のコードは、私が持っているものを示していますが、ユーザーフレンドリーな方法ではデータを表示できません。 "display：inline-block"は、要素を行に配置し、親divの幅に達した後、次の行を次の行に配置します。

 .rateDates { 
 
     display: inline-block; 
 
     margin: 10px; 
 
     font-family: consolas; 
 
     border: 1px solid #73d5e6; 
 
     border-radius: 15px; 
 
     padding: 4px 8px 4px 8px; 
 
    } 
 
    #ratesContainer { 
 
     border: 1px solid #73d5e6; 
 
     padding: 15px; 
 
     border-radius: 10px; 
 
     margin-top: 20px; 
 
     margin-bottom: 20px; 
 
     height:200px; 
 
    }

<div id="ratesContainer"> 
 
    <div class="rateDates"> 
 
    <span>00:00:00</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>11:11:11</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>22:22:22</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>33:33:33</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>44:44:44</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>55:55:55</span> 
 
    </div> 
 
</div>

問題は、私はそれが互いの上にと、親のdivの高さが再びトップからenaughスタートではありません後、子のdivのを置くことはできませんです。つまり、新しい列を開始します。

rateDatesクラスdivを列方向に配置したいと考えています。だから彼らは最初に行ではなく列を埋める。

ページは自動的にレンダリングされます。私はCSSソリューションが必要です。それが可能な場合。

ありがとうございます。

Answer 1

flexプロパティを使用します。

ここにコードが更新されました。

CSS

.rateDates { 
     margin: 10px; 
     font-family: consolas; 
     border: 1px solid #73d5e6; 
     border-radius: 15px; 
     padding: 4px 8px 4px 8px; 
    } 
    #ratesContainer { 
     border: 1px solid #73d5e6; 
     padding: 15px; 
     border-radius: 10px; 
     margin-top: 20px; 
     margin-bottom: 20px; 
     height:200px; 
     display:flex; 
     flex-direction:column; 
     flex-wrap:wrap 
    } 

あなたはそれをフレキシボックスを行うことができますHTML

<div id="ratesContainer"> 
    <div class="rateDates"> 
    <span>00:00:00</span> 
    </div> 
    <div class="rateDates"> 
    <span>11:11:11</span> 
    </div> 
    <div class="rateDates"> 
    <span>22:22:22</span> 
    </div> 
    <div class="rateDates"> 
    <span>33:33:33</span> 
    </div> 
    <div class="rateDates"> 
    <span>44:44:44</span> 
    </div> 
    <div class="rateDates"> 
    <span>55:55:55</span> 
    </div> 
</div> 

Answer 2

ちょうど別のアプローチを言及し、これはまた、マルチカラムのレイアウトを行うことができます。

 .rateDates { 
 
     display: inline-block; 
 
     margin: 10px; 
 
     font-family: consolas; 
 
     border: 1px solid #73d5e6; 
 
     border-radius: 15px; 
 
     padding: 4px 8px 4px 8px; 
 
    } 
 
    #ratesContainer { 
 
     border: 1px solid #73d5e6; 
 
     padding: 15px; 
 
     border-radius: 10px; 
 
     margin-top: 20px; 
 
     margin-bottom: 20px; 
 
     height:200px; 
 
     column-width: 110px; 
 
     column-fill: auto; 
 
    }

<div id="ratesContainer"> 
 
    <div class="rateDates"> 
 
    <span>00:00:00</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>11:11:11</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>22:22:22</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>33:33:33</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>44:44:44</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>55:55:55</span> 
 
    </div> 
 
</div>

しかし、私はフレキシボックスソリューションを好みます。これらの項目は、テキストフローの一部ではなく、inline-blockのために設計されています。 Flexboxでは、列の幅をハードコードする必要はありません。

Answer 3

：

#ratesContainer { 
 
    display: flex; /* displays children inline */ 
 
    border: 1px solid #73d5e6; 
 
    padding: 15px; 
 
    border-radius: 10px; 
 
    margin: 20px 0; 
 
} 
 

 
#ratesContainer > .rateDates { 
 
    flex: 1; 
 
    text-align: center; 
 
    margin: 10px; 
 
    font-family: consolas; 
 
    border: 1px solid #73d5e6; 
 
    border-radius: 15px; 
 
    padding: 4px 8px; 
 
} 
 

 
@media screen and (max-width: 768px) { /* adjust to your needs */ 
 
    #ratesContainer { 
 
    flex-direction: column; /* stacks children vertically */ 
 
    align-items: center; /* because of the changed direction this is now horizontal alignment/centering, otherwise (by default) it's vertical */ 
 
    } 
 
}

<div id="ratesContainer"> 
 
    <div class="rateDates"> 
 
    <span>00:00:00</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>11:11:11</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>22:22:22</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>33:33:33</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>44:44:44</span> 
 
    </div> 
 
    <div class="rateDates"> 
 
    <span>55:55:55</span> 
 
    </div> 
 
</div>

これは少し異なるアプローチですが、最終的な結果はあなたが望むものです。つまり、縦に1列に表示します。