让 div 粘在其他 div 的一边答案

【问题标题】：Make div stick to side of other div让 div 粘在其他 div 的一边
【发布时间】：2011-12-24 17:18:25
【问题描述】：

我正在尝试使用 jQuery 让一个 div 看起来滑到另一个 div 的右侧。

我的解决方案基于this answer，使用position:absolute，并在jQuery 中获取触发元素的位置，并相应地定位弹出框。

您可以在我制作的这个 JSFiddle 上看到到目前为止我所做的结果：Result / Source。

问题是，因为弹出框 div 使用 position:absolute，如果我调整页面大小，或者滚动条出现/消失 - 弹出框会与触发器 div 不对齐。

如何使弹出框 div 贴在触发 div 的右侧？

【问题讨论】：

标签： jquery html css layout

【解决方案1】：

与其依赖 jQuery，您可以通过将两个元素设置为内联元素、强制它们接触并将容器的 CSS 设置为 white-space: nowrap 来使两个元素在 CSS 中粘在一起。

HTML：

<div id="main">
    <p>If the draw is popped out, and you resize the page, it breaks, because it has position:absolute</p>
    <div id="clickable">
        <div id="trigger">
            <span>Click here - click away to hide</span>
        </div><div id="pop">
            <span>Now Resize Page</span>
        </div>
    </div>
</div>

请注意，</div><div id="pop"> 不是拼写错误。要强制触摸内联元素，您需要删除标记中的所有空格。

CSS：

#main {
    width:300px;
    margin:50% auto;
    margin-top:0;
    margin-bottom:0;
    background-color:#EEE;
    padding:10px;
}
#clickable { white-space: nowrap; }

#trigger {
    background-color: #FFF;
    width: 100%; 
    border: 4px solid #ddd;
    display: inline-block; }
#trigger span { margin: 5px; display: block; }

#pop {
    background-color: #333;
    color: #EEE;
    height: 38px;
    opacity: 0;
    display: none; }
#pop span { 
    margin: 10px; 
    display: block; }

JS：

$('#trigger').click(function(event) {
    event.stopPropagation();
    var width = $(this).outerWidth();
    var offset = $(this).offset();
    var top = (offset.top+4)+'px';
    var left = (offset.left+width)+'px';
    $('#pop').css({
        'top' : top,
        'left' : left,
        'display' : 'inline-block',
        'opacity' : 0,
        'width' : 0
    }).animate({
        'width' : '140px',
        'opacity' : 1
    });
});

$('html').click(function(event) {
    if (!($(event.target).closest('#pop').length)) {
        $('#pop').animate({'width':0,'opacity':0},500,
                           function() {
            $(this).hide();
        });
    }
});

预览：http://jsfiddle.net/Wexcode/4kg2W/3/

【讨论】：

很好的答案，但不幸的是我的容器使用jQuery slimScroll，这意味着溢出-x 是隐藏的，你知道我怎样才能让它显示在 slimScroll div 的边缘吗？
嗯，也许overflow-y是唯一隐藏的？不幸的是，我对您正在使用的插件了解不多，坦率地说，我不知道 overflow-y 的跨浏览器兼容设置如何（我认为它不适用于 IE8 或更低版本）。跨度>
别担心，我已经决定为此使用单独的对话框 - 但感谢您的回答，非常好。

【解决方案2】：

将触发 div 与 position: relative 和 popover 放入其中 position:absolute，这样，popover 将具有绝对位置，但始终相对于触发 div。

【讨论】：

在 jsfiddle 上效果很好 - 将在我的项目中实施并会报告！
这个问题是内部元素在一个容器中，它不会让任何东西在它外面，所以它被切断了！
如果你有一个带有溢出：隐藏的容器，请将它包装在一个普通的旧
中。将 position:relative 放在包装器上，并将 #pop 元素放在溢出旁边：隐藏的元素。
你能把容器改成 "overflow:visible" 吗？如果不是我建议按照@benastan 所说的那样做，请使用包含触发器和弹出框的 div（带有位置：相对）。由于弹出框是绝对位置（文档流外），只有触发器会影响它的块大小，所以弹出框的绝对位置将与预期相同。

【解决方案3】：

您可以在浏览器调整大小时调整位置：

$(window).resize(function(){
    $("#trigger").trigger('click');
});

【讨论】：

我想我只想要一个即时大小重新计算而不是完整的点击功能，但谢谢！

【解决方案4】：

你可以使用位置属性

<div style="position: absolute;right:-10px ;top:0"></div>

【讨论】：