如何根据内容水平增长div？
请问，有人可以向我解释一下，为什么红色 div 没有向右扩展？ 它停在屏幕结束的地方。 我必须做什么才能使其扩展？
有效的一件事是“显示：表格单元格”红色 div，但我想知道是否还有另一种方法以及为什么会发生这种情况......？
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
<div style="background-color: #f00;">
<div style="width: 2000px; height: 100px; " />
</div>
</body>
</html>
please, can someone explain to me, why the red div isn't expanding to the right? It stops where the screen ends. What do I have to do, to make it expand?
One thing that works is to "display: table-cell" the red div but I was wondering if there's another way and why this happens...?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head />
<body>
<div style="background-color: #f00;">
<div style="width: 2000px; height: 100px; " />
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
这确实很奇怪。 尝试浮动外部：
That is indeed bizarre. Try floating the outer:
它包含的 div 小于 2000px。 你需要做这样的事情：
当然，现在不需要指定内部 div 的宽度，除非它与外部 div 的宽度不同。
The div that it's contained in is smaller than 2000px. You need to do something like this:
Of course, now the inner div's width doesn't need to be specified unless it is different than the outer div's.
将
overflow: auto;放入父的样式中。Put
overflow: auto;in the parent<div>'s style.像这样关闭 DIV 标签（即自关闭标签）会引起麻烦。
它可能是合法的（请参阅此主题），但根据我的经验，它经常会导致奇怪的行为。
然而，这不是问题所在。 以下代码适用于 Chrome 和 IE9。
Display: inline-block;告诉元素根据需要增长（或尽可能少）。小提琴： http://jsfiddle.net/sArvr/
这看起来确实是违反直觉的行为。
Closing a DIV tag like that (i.e. a self-closing tag) will cause trouble.
It may be legal (See this SO Thread) but in my experience it often causes strange behavior.
However, that is not the problem. The following code works in Chrome and IE9.
Display: inline-block;tells the element to grow as much (or as little) as necessary.Fiddle: http://jsfiddle.net/sArvr/
This does seem like counter-intuitive behavior.
看看这个。 随着文本的继续，它会扩展容器......
Check with this one. it will expand the container as the text goes on...
根据您的用途，我假设 div 元素将成为页面的主要焦点； 如果是这种情况，您可以采用
width: 2000px;行并将其应用于正文，而不是直接应用于要拉伸的块级元素：如果此方法不起作用无论出于何种原因，创建透明像素图像并为其提供所需的宽度应该同样有效。
Depending on what you're using this for, I'm assuming the div element is going to be the main focus of the page; if this is the case, you can take that
width: 2000px;line and just apply it to the body instead of directly to the block-level element you want to stretch:If this method doesn't work for you for whatever reason, creating a transparent pixel image and giving it the width you require should work just as well.
内部 div 的宽度可以更改，我需要增大外部 div，这样我就无法为其分配宽度。
The width of the inner div can change, I need to grow the outer one so I can't assign a width to it.
看起来父 div 的最大宽度受到浏览器屏幕宽度的限制，即使子 div 的宽度超出了浏览器屏幕宽度。 这是一个奇怪的发现...
我建议在父 div 上使用 float 。 （参考：crescentfresh）我知道确保表格单元格不适用于 IE6。 在我的机器上对 IE7 进行快速测试也不起作用，尽管它应该......
这应该起作用。 （编辑：这不起作用......）
It seems like max width of parent div is limited by browser screen width even though child div's width grows beyond browser screen width. This is an odd discovery...
I suggest using float on parent div. (ref: crescentfresh) I know for sure that table-cell does not work for IE6. And a quick test on IE7 on my machine doesn't work either although it should...
This should work. (EDIT: This doesn't work...)
把
当您增加内容时，我们的 div 应该自动增加其大小。
put
<div style="min-height: 100px; " />
when you grow the content more, our div should grow its size automatically.