Question

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

将overflow: auto;置于父<div>的样式中。

Answer 4

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

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

Answer 5

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

这看起来像是反直觉行为。

Answer 6

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

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

如果这种方法因任何原因无法使用，创建一个透明的像素图像并给它所需的宽度也应该可以正常工作。

Answer 7

内部div的宽度可以改变，我需要增长外部的宽度，所以我不能为它指定宽度。

Answer 8

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

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

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

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

Answer 9

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

当您更多地增加内容时，我们的div应该自动增大其大小。

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

9 个答案: