CSS放置N div div inline-block逐列（垂直）

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的對彼此的頂部和父div的高度後不enaugh從頂部重新開始。換句話說，開始一個新的專欄。

我想以列方式放置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>

但我更喜歡Flexbox的解決方案。這些項目看起來不像文本流的部分，inline-block是專爲此設計的。使用Flexbox，您不需要對列的寬度進行硬編碼。

Answer 3

你可以做到這一點的Flexbox的：

#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>

這是一種有點不同的方法，但最終的結果是你想要的，即垂直顯示在一列中。