我正在使用 jQuery、HTML 和 CSS3 构建弹出窗口。
你可以在这里查看:
http://themelandia.com/lib/pages/templates/popover.html
目前我将弹出窗口放在触发器之后。
触发器和弹出框用 div.popover-wrapper
包裹。
<div class="popover-wrapper">
<a class="popover-trigger" href="#">The Trigger</a>
<div class="popover">
This is the popover!
</div>
</div>
我的问题是 popover get 被 popover-wrapper 的父级合并了。 虽然如果我添加像
这样的长字符串,布局没有问题AReallyLongLineWithoutASpaceWhichGetsDisplayedCorrectly
以下字符串在每个新单词后换行。
A really long line With space which doesnt get displayed correctly
你也可以在上面的链接中看到这个。
第一个 popover 工作正常,而第二个则不是,因为它被包裹在宽度较小的 div
中。
少
div.popover-wrapper {
position: relative;
div.popover {
position: absolute;
z-index: 200;
width: auto;
}
}
非常感谢!
最佳答案
我想最简单的方法是使用 white-space: nowrap
在 <div class="popvover">
.
关于jquery - 忽略父级的最佳 div 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14558355/