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的高度不再从顶部开始之后。换句话说，开始一个新的专栏。

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

您可以使用 Flexbox ：

＆＃13;

#ratesContainer {
  display: flex; /* displays flex-items (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 (max-width: 768px) { /* adjust */
  #ratesContainer {
    flex-direction: column; /* stacks children vertically */
    align-items: center; /* because of the changed direction this is now horizontal centering, otherwise it's vertical by default */
  }
}

＆＃13;

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

＆＃13;

它的方法有点不同，但最终结果是您想要的，即垂直显示在一列中。

Answer 3

仅提一种替代方法，这也可以通过多列布局来完成：

     .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，您无需对列的宽度进行硬编码。

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

3 个答案: