El siguiente código muestra lo que tengo, pero no es una forma fácil de usar para mostrar datos (tiempo). "display: inline-block" coloca los elementos en una fila y después de que alcanza el ancho del elemento primario principal coloca a su próximo hijo en la siguiente fila.

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

El problema es que no puedo hacer que coloque los divisores secundarios uno encima del otro y después de que la altura del div primario no se active, comience desde arriba nuevamente. En otras palabras, comience una nueva columna.

Quiero colocar divs de clase rateDates en forma de columna. Por lo tanto, primero no llenan la fila sino la columna.

La página se procesa automáticamente. Necesito una solución CSS. Si es posible.

Gracias.

1
Zait 18 oct. 2017 a las 14:07

3 respuestas

La mejor respuesta

Usa una propiedad flex.

Aquí hay un código actualizado.

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>
1
Mohammed Athar Imran Ahmed 18 oct. 2017 a las 11:19

Solo por mencionar un enfoque alternativo, esto también se puede hacer con un diseño de varias columnas:

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

Pero prefiero la solución Flexbox. Estos elementos no parecen partes del flujo de texto para los que inline-block fue diseñado. Y con Flexbox no necesitará codificar el ancho de la columna.

0
Ilya Streltsyn 18 oct. 2017 a las 11:27

Puede hacerlo en Flexbox :

#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 */
  }
}
<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>

Es un enfoque un poco diferente, pero el resultado final es lo que desea, es decir, mostrarlos en una columna verticalmente.

1
VXp 3 sep. 2018 a las 20:55