Css 如何通过内容水平增长div？_Css_Html_Expand_Autogrow

Css 如何通过内容水平增长div？

css html

Css 如何通过内容水平增长div？,css,html,expand,autogrow,Css,Html,Expand,Autogrow,请有人给我解释一下，为什么红色分区没有向右扩展？它在屏幕结束处停止。我该怎么做，才能让它扩张一个有效的方法是“显示：表格单元格”红色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.dt

请有人给我解释一下，为什么红色分区没有向右扩展？它在屏幕结束处停止。我该怎么做，才能让它扩张

一个有效的方法是“显示：表格单元格”红色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>

根据您使用它的目的，我假设div元素将成为页面的主要焦点；如果是这样的话，你可以选择宽度：2000px行并仅将其应用于主体，而不是直接应用于要拉伸的块级元素：

<style>
body
 {
width: 2000px;
 }
</style>


身体
{
宽度：2000px；
}

如果此方法因任何原因不适用于您，则创建一个透明像素图像并为其提供所需的宽度也同样适用。

包含该图像的div小于2000px。您需要这样做：

  <div style="background-color: #f00; width: 2000px;">
    <div style="width: 2000px; height: 100px; " />
  </div>

当然，现在不需要指定内部div的宽度，除非它与外部div不同。

内部div的宽度可以更改，我需要增加外部div的宽度，这样我就不能为其指定宽度。

这确实很奇怪。尝试浮动外部：

<div style="background-color: #f00; float:left;">
    <div style="width: 2000px; height: 100px;" />
</div>

似乎父div的最大宽度受浏览器屏幕宽度的限制，即使子div的宽度超出浏览器屏幕宽度。这是一个奇怪的发现

我建议在父div（ref:）上使用float，我确信表单元格不适用于IE6。在我的机器上快速测试IE7也不起作用，尽管它应该

这应该行得通。（编辑：这不起作用…）

Put

溢出：自动

的样式中使用code>。
检查此样式。随着文本的继续，它将展开容器
    <div style="background-color: #f00; height: 100px; display: inline-block;">
      <div style="background-color: blue; height: 50px; white-space:nowrap; display: inline-block;">
        here is some content
      </div>
    </div>


这里有一些内容


像这样关闭DIV标签（即自动关闭标签）会导致麻烦
这可能是合法的，但根据我的经验，它经常会导致奇怪的行为
然而，这不是问题所在。以下代码适用于Chrome和IE9
  <div style="background-color: #f00; display: inline-block; height: 100px;">
    <div style="width: 3000px; background-color: blue; height: 50px;">
        here is some content
      </div>
  </div>


这里有一些内容

显示：内联块告诉元素根据需要增长多少
小提琴：
这似乎是违反直觉的行为。
put

当您增加内容时，我们的div应该自动增加大小。我认为浮动应该只用于。。。好吧，实际上是浮起一些东西。过度使用浮子可能会导致混乱。将width设置为auto应该有效。虽然我个人不认为浮动是这里唯一的解决方案，但这在所有浏览器中都是最有效的，而table cell则不是。否决票删除。=）好发现。这很奇怪。我想看看是否有人能想出一个不使用表格单元格或浮点数的解决方案。你可以使用HTML而不是XHTML:）@nailitdown我希望这只是个玩笑。我讨厌非XML序列化HTML。个人意见…：-p
  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>

  <div style="background-color: #f00; display: inline-block; height: 100px;">
    <div style="width: 3000px; background-color: blue; height: 50px;">
        here is some content
      </div>
  </div>