html 列，其宽度会根据其内容自动更改答案

【问题标题】：html columns whose width automatically changes according to their contenthtml 列，其宽度会根据其内容自动更改
【发布时间】：2023-04-01 23:04:01
【问题描述】：

我创建具有 3 列的动态 HTML 页面。每列可以包含可变数量的文本 - 从 0 到 1000 个单词。我希望 3 列中的文本看起来大致相同的高度。所以，我想让列宽根据它们包含的文本量自动改变。

在 HTML 中，这会在表格中自动发生，当每个单元格都有一个文本 div 时，请参见此处的第一个表格： http://tora.us.fm/_script/demotables.html

但是，当单元格包含多个 div 时，这将不再起作用，请参见那里的第二个表格。最左边的柱子非常窄和高，而不是更宽和更短。

向最左边的列添加“宽度”属性（通过单击按钮）显示预期结果。但是，我事先不知道哪一列应该是什么宽度。

是否可以自动调整？

【问题讨论】：

我无法真正将您的描述与演示相匹配。我的浏览器在做什么奇怪的事情吗？我已经上传了你的 google chrome imageshack.us/f/841/torausfmscriptdemotable.png 渲染的演示截图，请确认这是你想要看到的......
@Matthias 是的，这是我想看到的，也是我点击“添加/删除宽度”按钮后看到的。然而，在我点击按钮之前，左栏又窄又高，每行都包含一个“aaaaaaaa”字样。也许这取决于窗口的宽度 - 看起来你有一个宽屏幕 - 如果你让你的窗口大约 800 像素宽，你就会明白我的意思。
一个可能有用的链接w3.org/TR/CSS21/tables.html#auto-table-layout 解释了计算列宽的算法。

【解决方案1】：

尝试将 td div{white-space: nowrap} 或 td div{display: inline} 添加到 CSS 中。这是你需要的结果吗？

【讨论】：

感谢您告诉我以前不知道的“空白”属性。但是，这不是解决问题的一般方法：有时某些列中的 div 很长，我确实希望它们在需要时换行。 display:inline 也不是解决方案，因为它将所有 div 放在一行中 - 它完全破坏了显示...

【解决方案2】：

在我的朋友 Eden Erez 的帮助下，我发现了一个可以部分解决问题的 hack：

在样式表中，插入：

.autowidth {visibility:hidden;}
.autowidth * {display:inline;}

在某些情况下，这会使浏览器将列宽设置为好像它们是单段一样，但仍将它们显示为多段。在此处查看示例： http://jsfiddle.net/erelsgl/RJa2k/76/

这在大多数情况下都非常有效。

【讨论】：