2

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

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

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

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

可以自动调整吗？

一个jsfiddle：http: //jsfiddle.net/erelsgl/RJa2k/5/

4

2 回答 2

1

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

于 2012-07-31T06:01:44.543 回答
1

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

  • 在每个 TD 中，再次打印内容 - 在一个特殊的 div 中，如下所示：

    < td >
 < div class='autowidth' >
     $content
 < /div >
 $content
< /td >

  • 在样式表中，插入：

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

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

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

于 2012-08-01T05:30:40.577 回答