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 回答