将项目拆分为动态列的纯 CSS 解决方案

Posted 2023-03-05

技术标签:

【中文标题】将项目拆分为动态列的纯 CSS 解决方案【英文标题】：Pure CSS solution for splitting items into a dynamic amount of columns 【发布时间】：2015-11-10 00:22:41 【问题描述】：

有没有办法在多列中对齐项目，列数取决于最宽的项目？项目高度和容器宽度都是固定的，但项目宽度是动态的。

我正在寻找一种纯 CSS 方法来实现以下行为：

（假设父容器是 300px 宽。）
如果最宽的项目超过 150 像素，请使用单列如果最宽的项目介于 100 像素和 150 像素之间，请使用两列如果最宽的项目小于 100 像素，请使用三列 ... 如果最宽项小于容器宽度/N，则使用 N 列

实现此行为的一种可能方法是使用 display:inline-block 并使用 javascript 将 width 属性设置为容器中最宽元素的宽度。

查看this JSFiddle 示例：

但是，我认为还应该有一种纯 CSS 的方式来执行此操作。有可能吗？

如果没有，也许有一种优雅的纯 CSS 方式将动态大小的项目分配/捕捉到具有固定宽度的容器中的列？

【问题讨论】：

w3schools.com/css/css3_multiple_columns.asp ???或w3schools.com/cs-s-ref/css3_pr_flex.asp 如果您只想要 css 解决方案，那么为什么要在 javascript 下标记？它也可以包含在解决方案中吗？基本没有。 CSS 无法检测宽度和更改参数，它只能根据参数设置样式 based。你需要 Javascript。任何时候你需要将 CSS 建立在不相关或后代元素的“如果”条件上，答案将是“不，你需要 JavaScript”。不，CSS 无法检测宽度。它可以根据父级设置宽度。一个元素无法检测到它自己的宽度。 【参考方案1】：

...我正在寻找一种纯 CSS 方法来实现以下目标行为...如果最宽的项目比...宽...

...我在想也应该有一个纯 CSS 的方式这样做...

As indicated by @Paulie-D，CSS 无法检测到您孩子 divs 的不同宽度，因此不存在纯 CSS 解决方案。

这是因为您想要获取所有元素的宽度，然后获取其中的最大值，然后使用该宽度将元素分配到列中。这种计算超出了 CSS。您将需要 Javascript 来执行此操作。

如果没有，也许有一种优雅的纯 CSS 方式来分发 / 将动态大小的项目捕捉到容器中的列宽度固定？

我将分两部分解释：

第 1 部分，CSS：

当我们说我们希望内容在列中时，这意味着从上到下的流程，而不是从左到右的包装流程。为此，我们需要 CSS 列。

~~诀窍是为column-count / column-width 指定auto。这将自动将内容分配到父宽度内所需的列数中。~~

我在上述陈述中犯了一个根本性错误（因此又进行了一次编辑）。根据specs here，算法说：

(01) if ((column-width = auto) and (column-count = auto)) then
(02) 退出； /* 不是多列元素 */

这是我之前错的地方。当column-count 和column-width 都设置为auto 时，它被视为不是多列元素。当这些属性之一设置为非自动值时，另一个属性由该属性确定。

来自above ref：

如果column-count 设置为auto，那么列数将由其他属性确定（例如，column-width，如果它具有非自动值）和如果column-width 设置为auto，则列宽将由其他属性确定（例如，column-count，如果它具有非自动值）

例如，将column-width 设置为固定宽度，例如120px（我们将在稍后的第 2 部分中处理这个问题）：

.container  -webkit-columns: auto 120px; columns: auto 120px;

这将导致容器在其自身宽度内将内容放入尽可能多的列中以适应120px 的列宽。如果增加容器宽度，它将获得更多列。如果您减小容器宽度，当可用空间不多时，它会减少最终折叠成一列的列。

请参阅下面的 sn-p 中的完整示例：

示例 1：

*  box-sizing: border-box; padding: 0; margin: 0; 
p  margin-left: 16px; 
.container  width: 400px; border: 1px solid #f00; margin: 16px; 
.container.col  -webkit-columns: auto 120px; columns: auto 120px; 
.container > div  
	-webkit-column-break-inside: avoid; column-break-inside: avoid; 
	display: block; padding: 8px; border: 1px solid #ccc;

#one  width: 200px; 
#two  width: 300px;

<p>Small Container (1-column):</p>
<div id="one" class="container col">
	<div class="item-min">Maudie Mcmanus</div>
	<div class="item-min">Remedios</div>
	<div class="item-min">Chaya B</div>
	<div class="item-min">Duncan</div>
	<div class="item-min">Lashonda</div>
</div>
<p>Medium Container (2-column):</p>
<div id="two" class="container col">
	<div class="item-min">Maudie Mcmanus</div>
	<div class="item-min">Remedios</div>
	<div class="item-min">Chaya B</div>
	<div class="item-min">Duncan</div>
	<div class="item-min">Lashonda</div>
</div>
<p>Large Container (3-column):</p>
<div id="three" class="container col">
	<div class="item-min">Maudie Mcmanus</div>
	<div class="item-min">Remedios</div>
	<div class="item-min">Chaya B</div>
	<div class="item-min">Duncan</div>
	<div class="item-min">Lashonda</div>
</div>

小提琴 1：http://jsfiddle.net/abhitalks/tgwp4b7a/2/show

在上面的 sn-p 中，我们在容器上使用column-count: auto，以及任意的column-width: 120px（仅用于演示）。这就是它的全部。上面的代码中有三个例子：（1）容器宽度小，内容分布在一列中，因为它们受到column-width的约束； (2) 容器中等宽度，内容分布在两列中，因为现在有更多可用空间； (3) 容器的宽度要大得多，可以容纳三列。

作为副作用，如果容器的宽度是百分比，那么整个设备也会自动响应。在大屏幕上显示更多列，在小屏幕上折叠成一列。

但是，这取决于您为容器的 column-width 提供的固定宽度，因此也可以称为 magic-number 解决方案。 但是，这不是我们想要的。我们不想根据容器的宽度来确定列，我们希望列由内容的宽度来确定。我们将在接下来的第 2 部分中了解如何消除这种依赖关系。

第 2 部分，用 Javascript 扩展它：

现在我们已经确定元素可以通过 CSS 自动分布在列中，具体取决于父级可用的宽度，我们可以扩展它以通过 Javascript 消除对固定宽度的依赖。

回到你的问题：

...如果最宽的项比...宽...

为了确定最宽的项目并将该宽度应用于其余项目，您只需要 a well-known 两行 Javascript：

var maxWidth = Math.max.apply(null, $("div.item").map(function () 
    return $(this).width();
).get());

我们还将子divs 设置为inline-block 防止换行以识别实际宽度。因此，您需要添加到我们在第 1 部分中编写的 CSS 中的是：

.container > div 
    display: inline-block; 
    white-space: nowrap;   /* prevents wrapping and helps getting actual width */

然后我们需要做两件事：（1）将容器上的column-width设置为我们上面计算的这个最大宽度； (2) 将此宽度设置为所有子 div 以使它们整齐地堆叠。此外，我们不需要在 CSS 中设置 column-count / column-width，因为无论如何我们都必须在 Javascript 中进行设置。

$("#container").css( "column-width": maxWidth ).find('div').width(maxWidth);

请参阅下面的 sn-p 中的完整示例：

示例 2：

//large
	var maxWidth = Math.max.apply(null, $("#one > div").map(function ()  return $(this).outerWidth(); ).get());
	$("#one").css( "-webkit-column-width": maxWidth, "column-width": maxWidth ).find('div').outerWidth(maxWidth);

	// medium
	var maxWidth2 = Math.max.apply(null, $("#two > div").map(function ()  return $(this).outerWidth(); ).get());
	$("#two").css( "-webkit-column-width": maxWidth2, "column-width": maxWidth2 ).find('div').outerWidth(maxWidth2);

	// small
	var maxWidth3 = Math.max.apply(null, $("#three > div").map(function ()  return $(this).outerWidth(); ).get());
	$("#three").css("-webkit-column-width": maxWidth3, "column-width": maxWidth3 ).find('div').outerWidth(maxWidth3);

*  box-sizing: border-box; padding: 0; margin: 0; 
	p  margin-left: 16px; 
	.container  width: 450px; border: 1px solid #f00; margin: 16px; 
	.container > div  
		-webkit-column-break-inside: avoid; column-break-inside: avoid; 
		display: inline-block;  white-space: nowrap;
		padding: 8px; border: 1px solid #ccc;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<p>Normal children (wrapping):</p>
	<div class="container">
		<div class="item">Maudie Mcmanus</div>
		<div class="item">Remedios Arrington</div>
		<div class="item">Chaya B</div>
		<div class="item">Duncan</div>
		<div class="item">Lashonda Tatum Walls</div>
	</div>
	<p>Large children (1-column):</p>
	<div id="one" class="container">
		<div class="item-min">Maudie Mcmanus Mcmanus Mcmanus</div>
		<div class="item-min">Remedios</div>
		<div class="item-min">Chaya B</div>
		<div class="item-min">Duncan</div>
		<div class="item-min">Lashonda</div>
	</div>
	<p>Medium children (2-column):</p>
	<div id="two" class="container">
		<div class="item-min">Maudie Mcmanus Mcmanus</div>
		<div class="item-min">Remedios</div>
		<div class="item-min">Chaya B</div>
		<div class="item-min">Duncan</div>
		<div class="item-min">Lashonda</div>
	</div>
	<p>Small children (3-column):</p>
	<div id="three" class="container">
		<div class="item-min">Maudie Mcmanus</div>
		<div class="item-min">Remedios</div>
		<div class="item-min">Chaya B</div>
		<div class="item-min">Duncan</div>
		<div class="item-min">Lashonda</div>
	</div>

小提琴 2：http://jsfiddle.net/abhitalks/ojd57678/4/show

_{（更改了上面的 sn-p 和小提琴。感谢@Yandy_Viera，他指出应该使用 jQuery .outerWdith 而不是 .width（忽略 box-sizing: border-box，导致要设置的宽度不正确。）}

在上面的 sn-p 中，我们现在使用了三个示例的变体： (1) 其中子 divs 的宽度较大，并且由于受容器宽度的限制而分布在一列中； (2) 其中子divs 的宽度较小，并且分布在两列中，因为现在有更多可用空间； (3) 其中子divs 的宽度非常小，可以容纳在三列中。

如您所见，CSS 可以帮助根据可用宽度将内容分配到列中，但不能计算最宽的元素宽度并将其应用于每个列。为此，一个两行 Javascript 将使您完成您最初想要的工作。

_{注意：当我第一次阅读您的问题时，我的印象是您已经有了一个可用的 Javascript 解决方案，但我不确定您是否想要一个。但是，在第二次阅读时，我意识到您没有，并且 Javascript 角度对于理解是必不可少的。因此，此编辑添加了 Javascript 部分。}

_{注意 2：此答案的先前版本存在一个缺陷，我在列属性的自动值中引入了一个基本错误。这需要再次编辑。}

【讨论】：

嗯，很好。您可以添加，如果宽度很小，列将是相同的高度？嗯……在某种意义上是的@Paulie_D。孩子的宽度需要固定。应更新答案以表明这一点。 OP 在哪里说他/她想要“自上而下的流程”？，实际上在 OP 的示例中并非如此，请注意 Remedios 来了在 Maudie 之后，但在右侧 ([Maudie Mcmanus] [Remedios Arrington]) 不像在您的示例中 Remedios 在下面的行中。另一方面，为什么当项目的内容发生变化时，它们被重组，它们会失去右边框？ @Yandy_Viera：感谢您注意到这一点，非常感谢。（1）这正是我在答案中添加的原因。我自己不太确定 Op 想要什么，因为我对 columns 的理解一直是自上而下的。这就是 CSS 列的具体实现方式。因此，我认为最好表明我的假设以避免混淆并让 Op 决定。 (2) 无法重现边框消失的问题。从这里看起来很好。不过，既然你已经指出了，我一定会看看的。再次感谢您。 @Abhitalks 不客气，边框的问题你可以在你的例子的图像中看到它，并查看你的这个 jsfiddle 叉子，我只是删除了项目的一些内容jsfiddle.net/Yandy_Viera/qvbbfdsL/1 【参考方案2】：

正如他们在 cmets 中所说的那样，不存在纯 CSS 的解决方案，所以我想为您提供一个使用 js 的不错的解决方案，您甚至不必反复寻找最宽的项目，一切都来自一组 CSS 和数学。

你可以改变元素的内容，你会看到列数是如何调整的，如果最宽的项小于容器宽度/N，它会自动使用N列。

Check out this JSFiddle for demo

这个想法很简单，你set width: 'auto'，display: 'inline-block' 到container 让它适应由最宽元素的宽度定义的内容，请参见下面的 img：

现在您可以使用container 的宽度来知道最宽项目的宽度，这样就避免了您必须反复寻找它。现在你可以使用这个宽度来设置其余的项目，但让我们做得更好一点，我们可以让元素占据container 的整个宽度，只需要一个垃圾计算：

var div = Math.floor(initialWidth / widestItemWidth);     /*this is to get as many items fit with the width of the widest element*/
var itemWidth = initialWidth / div;      /*for the width of the item occupy the entire container*/

所以如果最宽的项小于容器宽度/N，它将自动使用N列，它们将适合container的宽度，这就是你所要做的，只需设置一个css属性，做一点calc，你就有了你想要实现的目标。

$(document).ready(function() 
    var $container = $('.container');
    var $item = $('.item');

    var initialWidth = $container.outerWidth();

   $container.css(     /*to allow it to fit its contents which is defined by the width of the widest element*/
        width: 'auto',
        display: 'inline-block'
    );   

    var widestItemWidth = $container.outerWidth();     /*Now this is the width of the widest item*/

    var div = Math.floor(initialWidth / widestItemWidth);     /*this is to get as many items fit with the width of the widest element*/
    var itemWidth = initialWidth / div;      /*for the width of the item occupy the entire container*/
  
  /*if you don't want the items occupy the entire width of the container just use 'widestItemWidth' as width of $item*/

    $item.css(
        width: itemWidth,
        float: 'left'
    );
    $container.css(     /*restoring the initial styles*/
        width: initialWidth,
        display: 'block'
    );
)

.container 
  width: 400px;
  overflow: hidden;

.container .item 
  padding: 8px;
  border: 1px solid rgb(216, 213, 213);

*
  box-sizing: border-box;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item">Maudie Mcmanus</div>
    <div class="item">Remedios Arrington</div>
    <div class="item">Chaya B</div>
    <div class="item">Duncan</div>
    <div class="item">Lashonda Tatum Walls</div>
</div>

如果您想为您的项目添加边距，您只需在计算时将其考虑在内：

$(document).ready(function() 
    var $container = $('.container');
    var $item = $('.item');

    var initialWidth = $container.outerWidth();

    $container.css(
            width: 'auto',
            display: 'inline-block'
        );

    var currentWidth = $container.outerWidth();
    var itemMargin= parseInt($item.css('margin-right'));

    var div = Math.floor(initialWidth / currentWidth);
    var itemWidth = initialWidth / div - itemMargin;   /*subtracting the item's margin from the compute width*/

    $item.css(
        width: itemWidth,
        float: 'left'
    );
    $container.css(
        width: initialWidth,
        display: 'block'
    );
)

.container 
  width: 400px;
  overflow: hidden;

.container .item 
  padding: 8px;
  border: 1px solid rgb(216, 213, 213);
  margin-right: 3px;

*
  box-sizing: border-box;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="item">Maudie Mcmanus</div>
    <div class="item">Remedios Arrington</div>
    <div class="item">Chaya B</div>
    <div class="item">Duncan</div>
    <div class="item">Lashonda Tatum Walls</div>
</div>

Here a JSFiddle example to play with

【讨论】：

【参考方案3】：

使用纯 CSS 解决方案最接近的可能是使用其他人建议的 CSS 列（或 CSS 网格方法 - 请参阅编辑）。但是，关键是使用相对单位，并非常了解布局中列容器的位置和位置，并使用媒体查询来控制列数。这绝对是不是一个防弹的解决方案。但是，如果您正在创建布局并控制列容器元素的位置和范围，那么您可以相当可靠地控制列数。如果这是针对您无法控制的小部件，您确实需要实现基于 Javascript 的解决方案。

参考链接：Responsive CSS Columns、CSS Grid Layout

编辑： 再次阅读您的问题并查看您的屏幕截图示例后，看起来您实际上正在寻找一个常见的 CSS 网格网格解决方案，其中元素水平而不是垂直流动。我更新了我的答案，包括一个 sn-p 演示，其中块水平重新流动。

基于列的媒体查询和容器宽度的片段演示（最小列宽约为 10em）：

#main, #sideBar 
    box-sizing:border-box;
    display:block;
    padding:0;
    margin:0;
    width:100%;


.container 
    width: 100%;
    min-width:10em;
    -webkit-columns: 1;
    -moz-columns: 1;
      columns: 1;

.container .item 
    display: block;
    padding: 8px;
    border: 1px solid rgb(216, 213, 213);
    box-sizing:border-box;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

@media only screen and (min-width:20em) 
    .container 
    -webkit-columns: 2;
    -moz-columns: 2;
      columns: 2;
    


@media only screen and (min-width:32em) 
    #main 
        float:left;
        width:65%;
    

    #sideBar 
        float:left;
        width:30%;
        margin-left:5%;
    
    #sideBar .container 
    -webkit-columns: 1;
    -moz-columns: 1;
      columns: 1;
    



@media only screen and (min-width:48em) 
    
    #main .container 
    -webkit-columns: 3;
    -moz-columns: 3;
      columns: 3;
    

    #sideBar .container 
    -webkit-columns: 1;
    -moz-columns: 1;
      columns: 1;
    



@media only screen and (min-width:52em) 
    
    #sideBar .container 
    -webkit-columns: 2;
    -moz-columns: 2;
      columns: 2;
    



@media only screen and (min-width:100em) 
    
    #main .container 
    -webkit-columns: 5;
    -moz-columns: 5;
      columns: 5;
    

    #sideBar .container 
    -webkit-columns: 3;
    -moz-columns: 3;
      columns: 3;

<div id="main"><h1>#main</h1>
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</div>
<div id="sideBar"><h1>#sideBar</h1>
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</div>

编辑：使用 CSS Grid 方法添加了此片段演示，该方法将块水平重新排列而不是垂直。

#main, #sideBar 
    box-sizing:border-box;
    display:block;
    padding:0;
    margin:0;
    width:100%;
    clear:left;


.container 
    width: 100%;
    min-width:10em;


.container .item 
    display: block;
    float:left;
    padding: .5em;
    border: 1px solid rgb(216, 213, 213);
    box-sizing:border-box;
    vertical-align: top;



@media only screen and (min-width:20em) 
    .container .item 
        margin: 0 1%;
        width:48%;
    


@media only screen and (min-width:32em) 
    #main 
        float:left;
        width:65%;
    

    #sideBar 
        float:left;
        clear:none;
        width:30%;
        margin-left:5%;
    
    

    #sideBar .container .item 
        margin: 0;
        width:100%;
    



@media only screen and (min-width:48em) 
    
    #main .container .item 
        width:31%;
    



@media only screen and (min-width:52em) 
    
    #sideBar .container .item 
        margin: 0 1%;
        width:48%;
    




@media only screen and (min-width:100em) 
    
    #main .container .item 
        width:18%;
    

    #sideBar .container .item 
        width:31%;

<div id="main"><h1>#main</h1>
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</div>
<div id="sideBar"><h1>#sideBar</h1>
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</div>

【讨论】：

@media这个东西只是指屏幕宽度，并没有解决他的问题，因为他的“.container”元素不是页面的主体。 @RonenCypis - 我想你误解了我的回答。我的答案中没有任何部分使用页面的 body 元素上的 .container 类。如果您完全阅读答案并检查 sn-p 示例，您可以看到媒体查询用于根据其父元素的宽度控制 .container 元素的列数。尽管这些答案不是“动态的”，但它们确实为 OP 的相同列宽和仅使用 CSS 重排的问题提供了可能的解决方案。【参考方案4】：

正如许多其他人在这里指出的那样，没有唯一的 CSS 解决方案。主要是因为 CSS 被设计为在 dom 内容之前加载，因此内容显示得很好。我们这里的主要问题是我们事先不知道元素的宽度，我们只会在页面加载时知道它。页面上几乎所有的解决方案都有相同的想法，使用 Javascript 循环遍历元素，找到最宽的元素并将所有其他元素（具有相同的类）设置为给定的宽度。为了改进流程并使其成为单行解决方案（使用 jquery，也可以使用 Javascript 完成，但为简单起见，我使用了 jQuery），我建议使用以下“hack/trick”：

1）不要定义容器的宽度，将显示设置为table而不是block；

2) 不要为div内的项目设置任何宽度

这将使项目具有相同的宽度并显示在一列中，因此当我们使用 jQuery 获取最大宽度时，我们不需要循环遍历元素。

现在使用 jQuery 将额外的 CSS 规则注入到容器和项目的文档标题中。我们需要将容器显示类型改回块而不是表格，将其宽度设置为 400px（或我们需要的任何值），并且我们需要使项目具有设置的宽度。

由于 CSS 总是应用最后一个属性，这将非常容易：

$("<style> .container display: block; width:400px; .item-min width:"+$(".item-min").width()+"px;display:inline-block;</style>").appendTo("head");

我已经更新了你的 Fiddler 示例HERE

我已经在 IE 12、Edge、Chorme 和 Firefox 中对其进行了测试，并且它适用于所有浏览器。

编辑 1

如果您不想使用 jQuery 来保持页面尽可能简洁，您也可以使用以下单行 Javascript：

document.head.innerhtml += "<style> .container display: block; width:400px; .item-min width:"+(document.getElementsByClassName("container")[0].clientWidth-16-2)+"px;display:inline-block;</style>";

快速解释：容器的clientWidth会包含元素的内边距和边框，因为原示例中的内边距是8px，边框是1px，我们需要从容器的宽度中减去两次（一次左一次右）。

查看更新的Fiddle

编辑 2

完整的 HTML 文档：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style type='text/css'>
    .container 

    display:table;
    table-layout:fixed;


.container .item-min 
    padding: 8px;
    border: 1px solid rgb(216, 213, 213);


  </style>


<script type='text/javascript'>
window.onload=function()
document.head.innerHTML += "<style> .container display: block; width:400px; .item-min width:"+(document.getElementsByClassName("container")[0].clientWidth-16-2)+"px;display:inline-block;</style>";

</script>

</head>
<body>
      <div class="container">
        <div class="item-min">Maudie Mcmanus</div>
        <div class="item-min">Remedios Arrington</div>
        <div class="item-min">Chaya B</div>
        <div class="item-min">Duncan</div>
        <div class="item-min">Lashonda Tatum Walls</div>
    </div>


</body>

</html>

【讨论】：

【参考方案5】：

首先 - 查看 Fiddle Demo（玩.container的宽度...）

仅使用 CSS 是不可能的，但这是一个使用 jquery 的优雅解决方案，它检测容器的宽度、最宽项目的宽度，并将项目分散到相关数量的列中（动态创建）。

HTML

<p>Without width:
    <div class="container">
        <div class="item">Maudie Mcmanus</div>
        <div class="item">Remedios Arrington</div>
        <div class="item">Chaya B</div>
        <div class="item">Duncan</div>
        <div class="item">Lashonda Tatum Walls</div>
    </div>
</p>

Javascript

$(function()
    var $items = $('.item');

    // detect the widest column's width
    var widestItemWidth = 0;
    $items.each(function()
        widestItemWidth = Math.max(widestItemWidth, $(this).width());
    );

    // calculate the number of columns
    var $container = $('.container');
    var containerWidth = $container.width();
    var numOfColumns = parseInt(containerWidth / widestItemWidth);

    // create the columns
    for(var i = 0; i < numOfColumns; i++)
        $container.prepend('<div class="column"></div>');
    
    var $columns = $('.column');
    $columns.css('width', (100/numOfColumns)+'%');

    // spread the items between the columns
    $items.each(function(i)
        var columnIndex = i % numOfColumns;
        $(this).appendTo($columns.eq(columnIndex));
    );
);

CSS

.container 
    width: 400px;

.container .column 
    display: inline-block;
    box-sizing: border-box;
    vertical-align: text-top;

.container .item 
    display: inline-block;
    padding: 8px;
    border: 1px solid rgb(216, 213, 213);

【讨论】：

【参考方案6】：

最简单的方法似乎是为所有列设置宽度为 32% 加上 clear:none，每第三列（最后一列）设置一个单独的 clear:both 类。添加媒体查询以解决不同的屏幕尺寸并相应地设置宽度，例如24%、48% 等。

【讨论】：

【参考方案7】：

试试这个例子

@media only screen and (device-width : 300px) #container width:300px; display:block;
@media only screen and (device-width : 150px) #container width:150px; display:block; float:left
@media only screen and (device-width : 100px) #container width:150px; display:block; float:left

【讨论】：

他问的是 .container 的宽度，而不是屏幕宽度

以上是关于将项目拆分为动态列的纯 CSS 解决方案的主要内容，如果未能解决你的问题，请参考以下文章

html 用于嵌入宽高比为16：9的视频的纯CSS解决方案

VBA代码根据列的内容将excel文件拆分为多个工作簿？

如何动态调整拆分或表格视图控制器的大小？

SQL 动态地将值拆分为新列

带有多个 <tbody> 元素的条纹表的纯 CSS3 解决方案？

如何从 Tailwind 中拆分生成的 CSS 代码？