Div盒垂直内联

Question

I don't know, how to solve my following css problem, perhaps anybody can help:

I don't know the height of the items, but the width should be 33%. If the max-height of the parent Div box ist reached, the next element should float to the right.

Thanks.

Answer 1

Use Flexbox columns.

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

I have created an unordered list which is set as a flex container with a column direction, and allowed wrapping.

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

Answer 2

Hope this helps you. I'm not sure about the structure you have. I just created with dummy structure

  .flex-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; width: 600px; max-height: 250px; } .flex-item { order: 0; flex: 1 1 auto; align-self: flex-start; width: 33.33%; text-align: center; border: 1px solid #777; 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

You can try CSS columns. They are a little bit tricky to use for anything complex but would do what you are asking for.

Here is a pen but the most important part is outlined below. On the container element, declare the amount of columns, since you want each item to be 33% width, I've put 3 columns. column-gap is the space between each column. After that it's important to put each child element to width: 100% as this is percent width of the column, and display: inline-block .

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

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

Read more here

Browser support is here

Answer 4

.inline{width:100px;background:yellow;white-space:nowrap;display:inline;}

Content forContent forContent for