Div коробки вертикально INLINE

Question

Я не знаю, как решить мою следующую задачу CSS, возможно, кто-нибудь может помочь:

Я не знаю, высоту предметов, но ширина должна быть 33% , Если максимальная высота родительского поля Div и достигнута, следующий элемент должен плавать вправо.

Спасибо.

Answer 1

Используйте столбцы Flexbox.

https://jsfiddle.net/kirandash/azqjg2kb/

HTML:

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
</ul> 

CSS:

ul { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    height: 306px; 
    width: 200px; 
} 
li { 
    width: 100px; 
    height: 100px; 
    background:red; 
    color: white; 
    text-align: center; 
    font-size: 50px; 
    line-height: 100px; 
    font-weight: bold; 
    border: 1px solid white; 
    list-style: none; 
} 

Я создал неупорядоченный список, который установлен в качестве гибкого контейнера с направлением столбца и разрешенная упаковка.

https://jsfiddle.net/kirandash/azqjg2kb/

Answer 2

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

.flex-container { 
 
    \t display: flex; 
 
    \t flex-direction: column; 
 
    \t flex-wrap: wrap; 
 
    \t justify-content: flex-start; 
 
    \t align-content: flex-start; 
 
    \t align-items: flex-start; 
 
    \t width: 600px; 
 
    \t max-height: 250px; 
 
    } 
 
    .flex-item { 
 
    \t order: 0; 
 
    \t flex: 1 1 auto; 
 
    \t align-self: flex-start; 
 
    \t width: 33.33%; 
 
    \t text-align: center; 
 
    \t border: 1px solid #777; 
 
    \t margin-bottom: 10px; 
 
    }

<div class="flex-container"> 
 
    <div class="flex-item"> Element 1<br><br><br><br></div> 
 
    <div class="flex-item">Element 2</div> 
 
    <div class="flex-item">Element 3</div> 
 
    <div class="flex-item">Element 4</div> 
 
    <div class="flex-item">Element 5</div> 
 
    <div class="flex-item">Element 6</div> 
 
    <div class="flex-item">Element 7</div> 
 
    <div class="flex-item">Element 8</div> 
 
</div>

Answer 3

Вы можете попробовать CSS столбцы. Они немного сложны в использовании для чего-либо сложного, но будут делать то, о чем вы просите.

Это pen, но самая важная деталь показана ниже. В элементе контейнера объявите количество столбцов, так как вы хотите, чтобы каждый элемент имел ширину 33%, я поместил 3 столбца. column-gap - это пространство между столбцами. После этого важно поместить каждый дочерний элемент в width: 100%, так как это процентная ширина столбца и display: inline-block.

.container { 
    max-height: 400px; 
    columns: 3; 
    column-gap: 1rem; 
} 

.box { 
    width: 100%; 
    display: inline-block; 
} 

Подробнее here

Поддержка браузеров here

Answer 4

.inline {ширина: 100px; фон: желтый, бело-пространство: Nowrap; Дисплей: встроенный;}

Content forContent forContent для