在具有相对位置的较小 div 中具有绝对位置的 div 的最大宽度错误答案

【问题标题】：Wrong max-width for div with absolute position in a smaller div with relative position在具有相对位置的较小 div 中具有绝对位置的 div 的最大宽度错误
【发布时间】：2014-03-18 15:34:00
【问题描述】：

我有一个相对于 10px 宽度和高度定位的 div 元素。在 div 内，我将 div 绝对定位为最大宽度 200px，并且这个 div 包含一个长文本。问题是内部 div 没有拉伸到 200px 而是窄得多。有没有办法可以保持相同的属性并将内部 div 拉伸到 200px？

<div style="position:relative; width:10px; height:10px; display:inline-block;">
  <div style="position:absolute; max-width:200px; display:block;">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
</div>

演示：http://jsfiddle.net/LM3V4/6/

附加信息：外部 div 是文本中的一种图标，内部 div 是图标旁边的一种工具提示，因此我无法更改外部元素的大小。

解决方案：好的，所以解决我的问题是你必须用另一个 div 包裹内部元素，位置：绝对和宽度设置为 200px。 http://jsfiddle.net/LM3V4/17/

【问题讨论】：

您在第二个div 的样式中有错字。应该是position: absolute;。
是的，也在第一个 div 中。它应该是相对位置。我很抱歉。
当然没有拉伸。你怎么能在一个 10 英尺长的房子里放一张 200 英尺长的床？您的包装器 div 宽 10 像素，而内部 div 宽 200 像素。您可以将内部的宽度设置为 200px，但它会流出容器。
是的，从 html 的角度来看，我完全理解这一点。但是有什么解决方法吗？
为什么需要这样？如果我们知道您究竟想要达到什么目标，以及为什么我们更有可能提供帮助

标签： html css

【解决方案1】：

JsFiddle

min-width:200px;

你需要将最大值更改为最小值

【讨论】：

谢谢，但不是真的。如果我里面只有一个单词，那么应该根据单词进行拉伸。

【解决方案2】：

所以我不确定你想要实现什么，有人提到你是父容器的宽度设置为 10 像素，所以孩子的最大宽度只会达到 10 像素而不是 200 像素。我已经更新了你的 jsfiddle，将最大宽度移动到外部 div，比如 -

.outer
{
  max-width: 200px;
}

在这里查看http://jsfiddle.net/LM3V4/15/，让我知道这是您正在寻找的效果还是其他。此外，您无需更改 DIV 的定位即可实现此目的，我将其保留原样。

【讨论】：

不幸的是，这对我不起作用。外部元素是文本中的一种图标，内部元素是图标旁边的一种工具提示，因此我无法更改外部元素的大小。
好的，所以我认为您可能需要更新您的原始问题，以便人们可以更好地了解您所追求的效果。听起来您想要一个图标（可能是按钮）与一个具有最大宽度的工具提示相结合。您的第一个问题涉及 CSS 处理绝对定位元素尺寸的方式，有效地将它们从布局流程中移除。