logo标签列表

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

csshtmlexpandautogrow
14

请问，为什么红色的div不会向右扩展？它停在了屏幕的边缘。我该怎么做才能让它扩展呢？

一种可行的方法是将红色的div设置为"display: table-cell"，但我想知道还有没有其他方法以及为什么会出现这种情况...

<?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>
好的发现。这很奇怪。我想看看是否有人能够提出一个不使用table-cell或float的解决方案。 - Brian Kim
1
你可以随时使用HTML而不是XHTML :) - nailitdown
@nailitdown 我希望这只是一个玩笑。我讨厌非XML序列化的HTML。个人意见... :-p - Constantino Tsarouhas
9个回答
3

确实很奇怪。尝试将外部元素浮动：

<div style="background-color: #f00; float:left;">
    <div style="width: 2000px; height: 100px;" />
</div>
我认为浮动应该只用于... 实际上就是为了浮动某些东西。过度使用浮动可能会变成一团糟。将宽度设置为自动应该可以解决问题。 - Brian Kim
虽然我个人认为浮动不是唯一的解决方案，但它在所有浏览器中都能最好地工作，而表格单元格则不能。取消了踩的投票。=） - Brian Kim
2
在父级<div>的样式中添加overflow: auto;。
2
所包含的div小于2000px。您需要像这样做：
  <div style="background-color: #f00; width: 2000px;">
    <div style="width: 2000px; height: 100px; " />
  </div>

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

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>
1
  <div style="background-color: #f00;">
    <div style="width: 2000px; height: 100px; " />
  </div>

像这样关闭DIV标签（即自闭合标签）会引起麻烦。

它可能是合法的（请参阅此SO线程），但在我的经验中，它经常导致奇怪的行为。

然而，那并不是问题。以下代码可以在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;命令元素根据需要增长或缩小。

Fiddle示例：http://jsfiddle.net/sArvr/

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

0
内部div的宽度可能会改变，所以我需要扩大外部div的宽度，这样就无法给它指定一个固定的宽度。
0

在编程中，使用如下代码：

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

当内容增加时，该 div 会自动调整大小。

0

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

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

如果由于任何原因这种方法对您不起作用，创建一个透明像素图像并赋予所需宽度应该同样有效。
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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接