Html 如何根据父div宽度更改ol列表中的列数？

我希望下面的列表根据父div的宽度减少列数

我尝试使用@media规则的最大宽度，但它只考虑浏览器的宽度，而不考虑父div的宽度

我尝试使用宽度而不是最大宽度，但没有帮助

#反对者名单{
栏目：4个；
-webkit栏目：4个；
-moz列：4列；
左侧填充：25px；
列表样式类型：disc；
}
@媒体屏幕和屏幕（最大宽度：200px）{
#反对者{
栏目：2个；
-webkit栏目：2个；
-moz列：2个；
左侧填充：5px；
列表样式类型：disc；
}
}
李{
左侧填充：2px；
}
#反对者{
字体大小：12px；
}

腓尼基
奥匈>西班牙
阿兹特克
维京兰
埃及
希腊
中国
阿拉伯
土耳其
蒙古
印加
葡萄牙葡萄牙=“荷兰”>荷兰
拜占庭
法国
印度
日本
匈奴

在右下角调整此div的大小

从今天起，规则

列：数字列

不允许根据父列的宽度自动调整列

要调整列，请使用属性函数

minmax（）

（网格），指示最小值和最大值：

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

指示参数

自动调整

，这将允许父级在调整大小期间占用可用空间

#反对者名单{
显示：网格；
网格模板列：重复（自动拟合，最小值（100px，1fr））；
柱间距：10px；
字体大小：12px；
列表样式类型：disc；
}
李{
左侧填充：2px；
}

腓尼基
奥匈
波斯
暹罗
Maya
韩国
巴比伦尼亚
巴西
埃塞俄比亚
美国
西班牙
阿兹特克
Vikingland
埃及
希腊
中国
阿拉伯
土耳其
蒙古语
印加
葡萄牙
罗马
荷兰
拜占庭
法国
德国
印度
日本
匈奴人
俄罗斯
英格兰
易洛魁人
在右下角调整此div的大小

在正确支持容器查询之前，尚不可能。您可以使用grid@s.kuznetsov你是说像这里吗？@Pierre，差不多了。我已经用网格给出了一个解决方案。@Pierre，如果你有任何问题，请告诉我。你的回答在技术上是错误的。

列

接受物理宽度（例如：

列：12em

）。我并不是说网格解决方案不是更好。只是，从技术上讲，人们可以根据父宽度调整列数，而你却声称相反。@tao我不明白，你能用一个有效的代码提出一个答案吗？我好奇地试过

列：200px

和

列：12em

，但没有“什么也做不到。@Pierre，他打算使用

列的宽度。

。这也行。请查看我的第二个片段。@tao，技术错误的答案？你在说什么，伙计？

自动调整

参数正是允许元素延伸到父元素宽度的参数。

自动调整

参数是e确切地说，是什么允许元素延伸到父元素的宽度。请看这个沙盒-。技术上不正确的部分是建议“不允许自动调整列以适应父元素的宽度”。这是不正确的，因为如果使用物理测量（例如：

200px

）当

列的值

时，列数根据父项宽度而变化。当父项为

400px

时，它有1列，上面有2列，上面有

600px

3列，等等。哪个部分不清楚，“mate”？