Div盒垂直内联

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

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

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

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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 {宽度：100像素;背景：黄色;空白：NOWRAP;显示：内联;}

内容forContent forContent for