如何解决使固定宽度容器内部的弹出窗口自动调整大小
| 我有一堆\“ 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;
}
这将是您想要的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。