为啥我在DIV中输入文字不在DIV中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为啥我在DIV中输入文字不在DIV中相关的知识，希望对你有一定的参考价值。
HTML文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="css.css" />
</head>
<body>
<div id="container">
<div id="1"> </div>
<div id="2"> </div>
<div id="3"> </div>
<div id="4"> </div>
<div id="5">ffffffffffffffffffff </div>
<div id="7"> </div>
<div id="8"> </div>
<div id="10">ffffffffffffffffff </div>
<div id="11"> </div>
<div id="12"> </div>
</div>
</body>
</html>
CSS:
body
background-color:#FFFFFF;
margin:1px;
padding:0px;
text-align:center;
font-size:12px;
font-family:"楷体_GB2312"
#container
position:relative;
margin:0px auto 0px auto;
height:1000px;
width:850px;
text-align:left;
background-color: #FFFFFF;
#1 position:absolute;
top:0px;
left:0px;
width:192px;
height:107px;
margin:10px;
#2 position:absolute;
top:10px;
right:180px;
width:150px;
height:25px;
margin:10px
#3 position:absolute;
top:10px;
right:0px;
width:170px;
height:25px;
margin:10px
#4 position:absolute;
top:80px;
right:0px;
width:623px;
height:36px;
margin-bottom:10px;
margin-right:10px;
border:groove 1px
#5 position:absolute;
top:128px;
left:0px;
height:114px;
width:192px;
margin:0px 10px 0px 10px;
border:groove 1px;
#6 position:absolute;
top:-114px;
right:-2px;
width:623px;
height:114px;
margin-right:10px;
#7 position:absolute;
top:242px;
left:0px;
width:192px;
height:327px;
margin:10px;
#8 position:absolute;
top:242px;
right:0px;
width:623px;
height:200px;
margin:10px 10px 0px 0px;
#9 position:absolute;
top:1000px;
left:242px;
width:306px;
height:312px;
margin:0px 5px opx 2.5px;
#10 position:absolute;
top:464px;
right:0px;
width:306px;
height:312px;
margin:0px 10px 0px 5px;
#11 position:absolute;
top:592px;
left:0px;
width:192px;
height:184px;
margin:0px 10px 0px 10px;
#12 position:absolute;
bottom:0px;
left:0px;
width:828px;
height:50px;
margin:10px;
在包含文字的div后添加一个div,设置clear:both属性可以解决！
仔细看了下,原来你全用position:absolute;来定位,其实原因很简单,就是你的id用数字来命名,这样是不允许的.
<div id="d10">ffffffff</div>
#d10 position:absolute;
top:464px;
right:0px;
width:306px;
height:312px;
margin:0px 10px 0px 5px;
try again! 参考技术B 楼上正解，我没看他CSS就知道他ID错了。可惜回答晚了本回答被提问者采纳
在 jQuery 中选择 DIV 的真实高度
【中文标题】在 jQuery 中选择 DIV 的真实高度【英文标题】：selecting the true height of a DIV in jQuery 【发布时间】：2011-04-22 20:29:18 【问题描述】：我定义了一个固定高度的 DIV：
.w
height: 100px;
overflow: hidden;
如果我在其中输入文字，它将隐藏超过 100 像素的所有内容。我有一个显示所有文本的按钮，基本上它是这样做的：
$('.w').height('auto');
这将使所有文本可见，但我想对此进行动画处理。这不适用于 height='auto'，它必须具有特定的高度。
问题：如何获得 DIV 应该能够在其中显示所有文本的高度？
【问题讨论】：
【参考方案1】：像这样尝试scrollHeight：
$('#ID_OF_DIV')[0].scrollHeight
注意[0]，因为它是 DOM 元素的属性。
【讨论】：
好的，这确实有效！该数组是否记录在某处？我永远不会猜到这个！ ;-) @patrick: "这个数组文档在某个地方吗？" 是的，这是链接：docs.jquery.com/Types#jQuery jQuery 实例（除其他外）是当前集合中的 DOM 元素。所以var jqobj = $('#foo'); 为您提供了 ID 为“foo”（如果有）的元素的 jQuery 实例。您可以通过jqobj[0] 访问原始元素，通过jqobj.length 访问匹配元素的数量。 与真正的数组不同，您应该将length 属性和元素条目视为只读。 （续）
（继续）..只读。例如，切勿使用jqobj.length = 3; 或jqobj[0] = someElement;（尽管您可以在合理范围内使用jqobj[0] 的实际元素做您喜欢的事情）。始终通过 jQuery 函数调用来修改 jQuery 实例的内容。但访问原始 DOM 元素已记录并支持。
这行得通，应该是公认的答案！非常感谢！【参考方案2】：
您可以将高度设置为“自动”，然后测量它，然后将其重新设置并开始效果。
类似这样的东西 (live example)：
jQuery(function($)
// Div starts with "style='height: 10px; overflow: hidden"
var div = $('#thediv');
// On click, animate it to its full natural height
div.click(function()
var oldHeight, newHeight;
// Measure before and after
oldHeight = div.height();
newHeight = div.height('auto').height();
// Put back the short height (you could grab this first
div.height(oldHeight);
div.animate(height: newHeight + "px", "slow");
);
);
【讨论】：
div.height('auto').height() 似乎效果很好！感谢这个解决方案。我认为它比 div[0].scrollheight 更优雅一些。使其更具可读性 如果您有transition: height ... css 规则，这可能不起作用。
@JamesM.Lay - 可能不是，不。但我认为如果你有 CSS 过渡和/或动画，你也不会使用 jQuery 动画......【参考方案3】：
T.J. Crowder 的回答对我不起作用，因为“oldHeight”是一个计算出来的像素值，与我在样式表中指定的 rem 值不同。此外，内联样式覆盖了我对另一个媒体查询的不同高度。因此，我没有保存“oldHeight”并稍后将其放回去，而是通过将 css 'height' 设置为空字符串来清除 jQuery 的内联样式。
jQuery(function($)
// Div starts with "style='height: 10px; overflow: hidden"
var div = $('#thediv');
// On click, animate it to its full natural height
div.click(function()
// Measure after
var newHeight = div.height('auto').height();
// Remove inline styles
div.css('height', '');
div.animate(height: newHeight + "px", "slow");
);
);
【讨论】：
以上是关于为啥我在DIV中输入文字不在DIV中的主要内容，如果未能解决你的问题，请参考以下文章
请问：在css和html中下图的样式是怎样实现的？两排文字不在一条水平线，不必套用两个div吧？