使固定宽度容器内部的弹出窗口自动调整大小

问题描述

| 我有一堆\“ help \”链接，这些链接中的内容显示在鼠标悬停时。链接都是15x15px，我希望嵌套的弹出窗口能够自动调整大小，但是在使其正常工作时遇到了问题。如果将弹出窗口从其容器中拉出，则很容易进行此工作，但是它们仅受下一个父容器的宽度的限制... http://jsfiddle.net/NsGaN/

<a href=\"#\">
    <div>this text should not wrap</div>
</a>
<a href=\"#\">
    <div class=\"div2\">this text should wrap once the div reaches 300 pixels wide,but not before that</div>
</a>

a {
    display     : block;
    width       : 20px;
    position    : relative;
}

div {
    position    : absolute;
    border      : 1px solid #000;
    max-width   : 300px;
    padding     : 10px;
    top         : 10px;
    left        : 10px;
}

.div2 {
    top : 300px;
}

    

解决方法

        参见：http://jsfiddle.net/NsGaN/4/ 您还需要确定为什么也不想将文本换行时将链接限制为20px（15x15），这两个点有点排斥     ,        如果您将css更改为此：

a {
  width:20px;
  position:relative;
}

div {
  border:1px solid #000;
  padding:10px;
  top:10px;
  left:10px;
  float:left;
  max-width:300px;
}

这将是您想要的。