隐藏不合适的元素

Question

我有一个容器，我希望横向容纳一些孩子，但我知道我的孩子比平时容易多。

+-----------------------+
|                       |
|                       |
+-----------------------+

+----+ +----+ +----+ +----+ +----+ +----+ 
|    | |    | |    | |    | |    | |    | 
|    | |    | |    | |    | |    | |    | 
+----+ +----+ +----+ +----+ +----+ +----+

仅使用CSS，我如何才能显示适合的项目，并将它们展开以适合自适应？

期望的结果：

+-----+-----+-----+-----+
|     |     |     |     |
|     |     |     |     |
+-----+-----+-----+-----+

Answer 1

解决方案可分为两部分：

隐藏不合适的元素

为容器指定一个定义的宽度和高度。
将儿童的身高定义为与容器的身高相同。
将容器设置为overflow: hidden;，以便换行的孩子消失。

（感谢this answer鼓励这部分解决方案。）

扩大适合占用可用空间的儿童

将您的容器设置为display: flex;，以便孩子们可以成长。
将您的容器设置为flex-wrap: wrap;，以便那些不合适的孩子仍可以包裹并消失。
将孩子设置为flex: 1 0 [desired minimum width];，这样孩子才能成长，而不是缩小。

结果

＆＃13;

ul {
  border: 1px solid red;
  width: 350px;
  height: 100px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

ul > li  {
  border: 1px solid blue;
  display: block;
  flex: 1 0 100px;
  height: 100px;
  box-sizing: border-box;
}

＆＃13;

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

＆＃13;

Answer 2

@ NathanArthur的解决方案非常适合你有高度固定的情况，但是如果你不知道自己的高度，那么事情就会变得多毛了。

如果没有固定的高度，您可以使用display: grid。浏览器 support for css grid 目前仅限于最新版本，但我相信如果没有固定的高度，这将是少数（如果不是唯一的）方式之一。

但您可以使用display: grid功能与auto-fit功能相结合，设置repeat() minmax()列grid-auto-rows: 0px。这将为您提供由您设置的最小尺寸的列，这将填充所需的其余空间。将其与grid-template结合使用，这将隐藏由子自动放置添加的任何其他行，如果它们开始超出定义的ul { border: 1px solid red; width: 350px; overflow: hidden; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: 1fr; grid-auto-columns: 0px; grid-auto-rows: 0px; } ul.test2{ width: 520px; } ul > li { border: 1px solid blue; box-sizing: border-box; }参数的范围，则会发生这种行。看起来像这样的东西，注意没有明确的高度和可变宽度：

<ul>
  <li>Item 1</li>
  <li>Item 2<br><br><br> with some extra height</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>
<ul class="test2">
  <li>Item 1</li>
  <li>Item 2<br><br><br> with some extra height</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

Songs

仅显示适合的项目数，然后展开以适应

2 个答案:

隐藏不合适的元素

扩大适合占用可用空间的儿童

结果