css 容器布局问题？
在询问如何实现按指定比例和间距在容器中平均显示元素之前，文章简要概述了遇到的问题和所需的效果。
问题描述
如何实现一个随父容器宽度自适应的高度自适应容器，其中嵌套的元素宽度百分比固定，间距也固定，且在不同宽度下保持平均分布？
问题解答
以25%的宽度和1rem的间距为例，问题的关键在于计算元素宽度：
元素宽度 = (外部宽度 - 间隙) / 项数
具体来说，宽度可以设置为：
width: calc((100% - 1rem * 5) / 4)
此外，需要添加 margin-left: 1rem 以保持间距。
替代方法
使用 padding 代替 margin
为了避免在内部元素上使用 margin，可以在外部容器上使用 padding，如下所示：
.rxc-container {
padding: 1rem;
}
.item {
width: calc((100% - 1rem * 3) / 4);
margin-right: 1rem;
margin-bottom: 1rem;
}使用网格布局 (grid)
网格布局提供了一种更简便的方法：
.item {
height: 100px;
border: 1px solid;
}
.rxc-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
padding: 1rem;
}使用网格布局，元素将自动根据分配的列数和间距平均分布。
以上就是如何实现容器内元素按比例和间距平均分布？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
509
收藏
