14

拜托，有人可以向我解释一下，为什么红色 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>
4

9 回答 9

3

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

<div style="background-color: #f00; float:left;">
    <div style="width: 2000px; height: 100px;" />
</div>
于 2009-01-30T01:03:57.410 回答
2

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

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

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

于 2009-01-30T00:57:09.157 回答
2

放入overflow: auto;父母<div>​​的风格。

于 2011-03-16T02:43:15.260 回答
1 
  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>

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

这可能是合法的（请参阅此 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/

这似乎是违反直觉的行为。

于 2011-12-17T05:39:51.293 回答
1

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

    <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>
于 2011-12-17T05:13:52.667 回答
0

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

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

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

于 2009-01-30T00:57:05.927 回答
0

内部 div 的宽度可以改变，我需要增加外部的宽度，所以我不能为其分配宽度。

于 2009-01-30T00:59:20.087 回答
0

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

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

这应该有效。（编辑：这不起作用......）

<div style="background-color: #f00; width: auto;">
  <div style="width: 2000px; height: 100px; "></div>
</div>
于 2009-01-30T01:05:19.403 回答
0

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

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

于 2012-01-12T11:48:24.780 回答