javascript - 如何根据在 div 中输入的文本量扩展 div 框(菜单)?

标签 javascript html css

我一直想知道如何在必要时平行于我输入的文本量来扩展我的 div 框正方形。让我用一个例子来说明我的问题:

http://postimg.org/image/l4mrkj0bh/

文本比框本身多得多,因此会重叠。但是如果我有一个较短的文本,这不是问题,因为框的大小是相同的,静态的。我想让它充满活力。

这是 div 框的 CSS:

#centercol {
position: relative;
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
width: 52%;
float: left;
border: 2px solid #354350;
border-radius: 5px;
-moz-border-radius: 5px;    
height: 400px;
margin: 5px;
padding: 5px;
}

我什至无法想象这是如何做到的,但我在 e107 的新闻系统中看到了这样的功能。

我们将不胜感激。

最佳答案

不使用height,而是尝试使用min-height:

#centercol {
  ...
  min-height: 400px;
  ...
}

我认为属性名称本身是不言自明的。

关于javascript - 如何根据在 div 中输入的文本量扩展 div 框(菜单)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25518688/

相关文章:

javascript - 如果 $(element).text() 在字符串中

匹配 mm/dd/yyyy 格式的 JavaScript 正则表达式 - 仅限于数字输入

html - 具有不同列的两个表 - 可能具有相同的高度? HTML CSS

ruby-on-rails - 将样式应用于脚手架 View

css - 将一个 div 滚动到另一个 div 上

javascript - 尽管有控制台打印,AngularJS ng-if 表达式仍未评估

javascript - jQuery 与 Rails/Coffeescript 绑定(bind)事件?

html - 悬停时圆形裁剪到圆形边框

javascript - (深色模式)添加 "dark-theme"后如何改变背景?

javascript - 没有服务器端脚本(javascript)的处理表单+在脚本中添加CSS