如何创建固定高度、宽度随内容自适应的多列文本段落？

你遇到的问题核心是inline-block结合父级white-space: nowrap导致文本容器被拉伸至窗口宽度，而非根据内容自适应。通过以下调整可以实现文本容器高度占满窗口、宽度随内容自适应的横向布局：

关键修改点 #

• 改用flex布局实现横向排列，替代inline-block+white-space: nowrap，更易于控制元素尺寸
• 给文本容器设置inline-size: fit-content（或width: fit-content），让宽度由列数和列宽自动计算
• 将columns的列宽从相对视窗的20vw改为固定值（或合适的相对单位），避免容器被视窗宽度强制拉伸
• 保留column-fill: auto，确保内容优先填充高度，自动生成所需列数

修改后的代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }   

        body {
            display: flex;
            gap: 1rem; /* 元素间间距，可自定义 */
            padding: 5vh;
            align-items: flex-start;
        }   

        body > div, p {
            height: 90vh;
        }

        div {
            background-color: black;
            aspect-ratio: 2 / 5;
        }

        p {
            columns: 200px auto; /* 列宽设为固定值，自动生成列数 */
            column-fill: auto;
            inline-size: fit-content; /* 宽度自适应内容 */
            background-color: #ccc;
            padding: 1rem; /* 可选，增加内边距提升可读性 */
        }
    </style>
</head>
<body>
    <div></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div></div>
</body>
</html>

效果说明 #

• 文本容器高度固定为90vh，内容会自动填充高度并生成对应数量的列
• 文本容器宽度由列数×列宽决定，随内容多少自动调整，不会强制拉伸至窗口宽度
• 图片容器通过aspect-ratio保持固定比例，与文本容器横向排列，适配任意屏幕尺寸

内容的提问来源于stack exchange，提问作者Viacheslav Poliakov