Как я могу сделать поплавок с CSS?

Question

Я знаю, что CSS поддерживает только левые и правые значения для свойства float, но есть ли метод для реализации плавающей вершины? Я постараюсь объяснить. У меня есть следующий код:

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

С этим кодом каждый div перемещается влево до тех пор, пока не будет достигнут правый предел страницы. Я хочу сделать то же самое, но по вертикали, чтобы каждый div помещался внизу предыдущего, а затем, когда достигнут нижний предел страницы, создается новый столбец. Есть ли способ сделать это, используя только CSS (и, возможно, редактирование HTML-кода)?

Answer 1

Это работает, применяется в ul:

display:flex;
flex-direction:column;
flex-wrap:wrap;

Answer 2

Уловка, которая сработала для меня, состояла в том, чтобы изменить режим записи на время выравнивания div.

.outer{  
  /* Limit height of outer div so there has to be a line-break*/
  height:100px;
  
  /*  Tell the browser we are writing chinese. This makes everything that is text
  top-bottom then left to right. */
  writing-mode:vertical-lr;

}

.outer > div{
  /* float:left behaves like float:top because this block is beeing aligned top-bottom first 
  */
  float:left;
  width:40px;  
  
  /* Switch back to normal writing mode. If you leave this out, everything inside the
  div will also be top-bottom. */
  writing-mode:horizontal-tb;

}

<div class="outer">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>

Answer 3

Я знаю, что этот вопрос старый. Но любой, кто хочет сделать это сегодня здесь, вы идете.

div.floatablediv{
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
}
div.floatcontainer{
  -webkit-column-count: 2;
	-webkit-column-gap: 1px;
	-webkit-column-fill: auto;
	-moz-column-count: 2;
	-moz-column-gap: 1px;
	-moz-column-fill: auto;
	column-count: 2;
	column-gap: 1px;
	column-fill: auto;
}

<div style="background-color: #ccc; width: 100px;" class="floatcontainer">
  <div style="height: 50px; width: 50px; background-color: #ff0000;" class="floatablediv">
  </div>
    <div style="height: 70px; width: 50px; background-color: #00ff00;" class="floatablediv">  
  </div>
    <div style="height: 30px; width: 50px; background-color: #0000ff;" class="floatablediv">  
  </div>
    <div style="height: 40px; width: 50px; background-color: #ffff00;" class="floatablediv">  
  </div>
  <div style="clear:both;"></div>
</div>

Answer 4

Возможно, вы сможете что-то сделать с помощью родственных селекторов, например ::100100

div + div + div + div{
float: left
}

Не пробовал, но это может привести к тому, что 4-й дивизион останется, делая то, что вы хотите. Опять не полностью поддерживается.