仅显示适合的项目数量，然后展开以紧密适合 [英] Display only the number of items that will fit, and then expand to fit snugly

问题描述

我有一个容器，希望水平容纳多个孩子，但我知道我的孩子比通常容纳的孩子多.

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

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

仅使用CSS，我如何只显示可以容纳的项目，然后将其展开以紧密容纳?

所需结果:

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

解决方案

@NathanArthur的解决方案非常适合您具有固定高度的情况，但是如果您不知道自己的身高，事情会变得有些毛茸茸. /p>

要在没有固定高度的情况下执行此操作，可以使用display: grid.浏览器 对CSS网格的支持 目前仅限于最新版本，但我相信这是在没有固定高度的情况下为数不多的一种方法(如果不是唯一的话).

但是您可以做的是使用repeat()函数和minmax()函数结合使用带有auto-fit列的display: grid.这将为您提供由您设置的最小大小的列，它将填充所需的其余空间.将其与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> 

I have a container that I want to fit a number of children in horizontally, but I know I have more children than will often fit.

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

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

Using only CSS, how do I only display the items that can fit, and expand them to fit snugly?

Desired result:

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

解决方案

@NathanArthur's solution is great for cases where you have a fixed height, however in the case you don't know your height things get a bit more hairy.

To do this without a fixed height you can use display: grid. Browser support for css grid currently is pretty limited to latest versions, but I believe this would be one of few (if not the only) way to do with without a fixed height.

But what you can do is set up a display: grid with auto-fit columns using the repeat() function combined with the minmax() function. This will give you columns with a minimum size set by you, which will fill the rest of the space needed. Combine this with grid-auto-rows: 0px which will hide any additional rows added by child auto placement which happens if they start to go outside the bounds of the defined grid-template parameters. Looks a little something like this, note no defined heights and variable widths:

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>

这篇关于仅显示适合的项目数量，然后展开以紧密适合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！