Javascript 垂直内联的Div框

我不知道，如何解决我下面的css问题，也许任何人都可以帮助我：

我不知道这些东西的高度，但宽度应该是33%。如果已达到父Div框的最大高度，则下一个元素应向右浮动

谢谢。

使用Flexbox列

HTML:

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

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

我创建了一个无序列表，它被设置为一个带有列方向的flex容器，并允许包装

---

希望这对你有帮助。我不确定你的结构。我刚刚创建了虚拟结构

.flex容器{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
调整内容：灵活启动；
调整内容：灵活启动；
调整项目：灵活启动；
宽度：600px；
最大高度：250px；
}
.弹性项目{
顺序：0；
flex:1自动；
自我校准：灵活启动；
宽度：33.33%；
文本对齐：居中；
边框：1px实心#777；
边缘底部：10px；
}

元素1




要素2
要素3
要素4
要素5
要素6
要素7
要素8

您可以尝试CSS列。它们对于任何复杂的东西都有点棘手，但可以满足您的要求

这是一个简单的例子，但最重要的部分概述如下。在container元素上，声明列的数量，因为您希望每个项的宽度为33%，所以我放置了3列<代码>列间距是每列之间的间距。在此之后，重要的是将每个子元素设置为

width:100%

，因为这是列的百分比宽度，并且

display:inline block

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

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

阅读更多

---

浏览器支持为

.inline{宽度：100px；背景：黄色；空白：nowrap；显示：inline；}

---

Content-forContent-forContent-form可能实现您所期望的功能…我已经在我的项目中使用了flexbox，但我找不到解决此问题的方法，很高兴它有所帮助。不客气。祝你有美好的一天。