html 列的宽度根据其内容自动改变

2024-01-29

我创建了包含 3 列的动态 HTML 页面。每列可以包含可变数量的文本 - 从 0 到 1000 个单词。我希望 3 列中的文本看起来高度大致相同。因此,我希望列宽根据其包含的文本量自动更改。

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

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

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

可以自动调整吗?

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


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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html 列的宽度根据其内容自动改变 的相关文章

  • 如何使用滚动条图像?

    如何使用 HTML CSS 替换滚动条的图像 I have scrollbar base color 00acee scrollbar dark shadow color 00acee scrollbar track color fffff
  • 如何设置 jQuery 可拖动的最小/最大左和最小/最大右

    我复制了一份JSbin来练习 JSbin链接在这里 https jsbin com gififikisa edit html css js output 实际站点链接在这里 http 79 170 40 181 emory com Proj
  • 停止 CSS 动画但让其当前迭代完成

    我有以下 HTML div class rotate div 以及以下 CSS webkit keyframes rotate to webkit transform rotate 360deg rotate width 100px hei
  • 更少的编译错误

    我正在使用 Incident57 的 CodeKit 预处理器来编译一系列 less 文件 这些文件将被导入并缩小为一个名为 template css 的 CSS 文件 然而 在进行一些编辑后 我不知道是什么编辑导致了这个 我开始得到non
  • CSS过渡div晃动

    为什么当我使用位置绝对和百分比宽度时 当我将鼠标悬停在上面的 div 上时会出现此故障 有例子 我在更复杂的网站上遇到了这个故障 div class box text div div class container div box widt
  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • 图像之间的垂直间距

    我将一张图像剪切为三张相同的图像 现在我将其放入 html 代码中 如下所示 img src images disclosure2 01 jpg alt Disclosure img src images disclosure2 02 gi
  • 清理 CSS 抖动

    我已经构建了这些圆圈 当鼠标悬停时它们会扩展边框 我现在遇到的唯一问题是有时圆圈会抖动 摇晃 当我设置transition all 1s ease in out 超过 0 2 秒 有解决这个问题的方法吗 还是事情就是这样 这是其中的代码Js
  • 在 Bootstrap 3 中将容器类嵌套在容器流体类中?

    除了填充问题之外 为什么不建议将 container 嵌套在 container fluid 中 如果将子容器填充归零 如下面我的代码所示 则效果与拥有一个容器相同 此外 如今 不同的全宽和固定宽度布局似乎很常见 我知道文档说了什么 LIN
  • C# html-helper 扩展现有方法而不覆盖?

    我已经搜索过这个问题并发现可能answer https stackoverflow com questions 11232041 how to create an html helper to extend textboxfor to ad
  • CSS“概述”Webkit 和 Gecko 上不同的行为行为

    我正在做一个实验 我发现 轮廓 CSS2 属性在 Webkit 和 Gecko 上的实现方式不同 在下面的脚本中 我有一个绝对位置 div 在另一个 div 内 但浮动在其外部 Webkit 上的轮廓概述了实际的父 div 而在 Gecko
  • 如何用css3和html5制作不规则形状的div?

    我想知道是否有可能构建具有不规则形状的 div 类似于此 例如格陵兰岛 欧洲 非洲 我想使用 CSS3 和 HTML5 创建像这里这样的地图 以下是示例图像的链接 你所拥有的看起来像一个网格 你可以通过一个 div 上的许多渐变来获得它 也
  • 将箭头添加到 Twitter Bootstrap 的下拉药丸中?

    我的 Twitter 引导下拉按钮成功工作 但我有一个小问题 这里的黑色导航栏 http twitter github com bootstrap javascript html dropdowns http twitter github
  • 通过电子邮件发送在 HTML5 画布上创建的图像

    我有一个画布 用户可以通过交互来更改设计 现在 用户完成更改后 可以提交他的设计及其电子邮件 ID 但为了提交设计 我使用以下方法将画布转换为图像http www nihilogic dk labs canvas2image http ww
  • IE8 底部:0 在位置:绝对的行为类似于位置:固定

    我有一个 DIV 必须始终位于页面的底部 左侧 类似于页脚菜单 div bottom menu position absolute z index 1 left 0 bottom 0 width 90 我的页面定义了最小高度 当用户将其缩小
  • 使图像宽度为父 div 的 100%,但不大于其自身宽度

    我试图让图像 动态放置 对尺寸没有限制 与其父 div 一样宽 但前提是该宽度不比 100 时其自身宽度宽 我已经尝试过这个 但没有成功 img width 100 height auto max width 100 其中许多图像比它们的父
  • Windows 上的锯齿字体 - Chrome 和 Safari

    我使用以下代码在网页上使用自定义字体 font face font family HelveticaNeueBold src url fonts HelveticaNeueBold eot src url fonts HelveticaNe
  • jQuery 显示/隐藏兄弟姐妹

    我有这段代码 旨在首先隐藏除第一个元素之外的所有相关元素 这个 做的不错啊接下来 它应该根据选择的项目显示 隐藏这些元素 但这部分不起作用 想法 jQuery accordion dl not first child hide hide a
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep
  • ☺ 不在移动版本中呈现

    我如何获得特殊角色 笑脸在移动浏览器中正确呈现 li a href http goo gl GjxlI title target blank span style font size 20px span a li 它在大多数浏览器上显示为

随机推荐