Question

我有一堆“帮助”链接，其中包含鼠标悬停时显示的内容。这些链接都是15x15px，我希望嵌套的弹出窗口自动调整大小，但是在使它工作时遇到了问题。如果我将弹出窗口拉出容器之外，很容易做到这一点，但是它们只是限制在下一个父容器的宽度......

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

Answer 1

如果你将你的css更改为：

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

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

这将是你想要的。

Answer 2

请参阅：http://jsfiddle.net/NsGaN/4/

当你也不想要文字换行时，你需要决定为什么要限制20px（15x15）的链接，这两点有点自我排列

在固定宽度容器内部弹出窗口以正确自动调整大小

2 个答案: