如何按内容水平增长 div？答案

【问题标题】：How to grow a div horizontally by its content?如何按内容水平增长 div？
【发布时间】：2010-10-04 09:25:38
【问题描述】：

请有人向我解释一下，为什么红色 div 没有向右扩展？它在屏幕结束的地方停止。我该怎么做才能让它扩大？

可行的方法是“显示：table-cell”红色 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>

【问题讨论】：

很好的发现。这很奇怪。我想看看是否有人在不使用表格单元或浮点数的情况下提出解决方案。
你总是可以使用 HTML 而不是 XHTML :)
@nailitdown 我希望这只是个玩笑。我讨厌非 XML 序列化的 HTML。个人意见……：-p

标签： css html expand autogrow

【解决方案1】：

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

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

【讨论】：

我认为浮动应该只用于......实际上是浮动的东西。过度使用浮动可能会变得一团糟。将宽度设置为自动应该可以工作。
虽然我个人认为浮动不是这里唯一的解决方案，但这在所有浏览器中效果最好，而 table-cell 则不然。删除了反对票。 =)

【解决方案2】：

它所在的 div 小于 2000px。你需要做这样的事情：

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

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

【讨论】：

【解决方案3】：

将overflow: auto; 放入父<div> 的样式中。

【讨论】：

【解决方案4】：

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

像这样关闭 DIV 标签（即自关闭标签）会造成麻烦。

这可能是合法的 (See this SO Thread)，但根据我的经验，它经常会导致奇怪的行为。

但是，这不是问题所在。以下代码适用于 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>

Display: inline-block; 告诉元素尽可能多（或尽可能少）增长。

小提琴：http://jsfiddle.net/sArvr/

这确实是违反直觉的行为。

【讨论】：

【解决方案5】：

检查这个。随着文本的继续，它将扩展容器......

    <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>

【讨论】：

【解决方案6】：

根据您使用它的目的，我假设 div 元素将成为页面的主要焦点；如果是这种情况，您可以使用 width: 2000px; 行并将其应用于正文，而不是直接应用于要拉伸的块级元素：

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

如果由于某种原因此方法对您不起作用，那么创建一个透明像素图像并为其提供您需要的宽度应该也可以。

【讨论】：

【解决方案7】：

内部 div 的宽度可以改变，我需要增大外部 div，所以我无法为其分配宽度。

【讨论】：

【解决方案8】：

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

我建议在父 div 上使用 float。（参考：crescentfresh）我确定 table-cell 不适用于 IE6。在我的机器上对 IE7 进行快速测试也不起作用，尽管它应该...

这应该可行。（编辑：这不起作用......）

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

【讨论】：

【解决方案9】：

输入<div style="min-height: 100px; " />

当你增加内容时，我们的 div 应该会自动增加它的大小。

【讨论】：