0

我希望能够左右滑动 div ...我已阅读其他帖子并使用按钮单击使其工作。

但

我想要一个浮动的“耳朵”（像按钮一样的小圆形图标），它会粘在 div 的右上角。这个“耳朵”将充当表单中左右滑动的按钮。

我的问题是....如何让这个小耳朵贴在 div 的右上角，但让它挂在 div 的上方和外部。
另一种说法是，我希望有一个浮动 div，它会粘在 div 的右上角，而不管其他 div 位于何处。

我正在考虑使用另一个包含图形的 div，并将“耳朵”的位置强制为“耳朵”应该附加到的 div 的右上角。

谢谢你

4

2 回答 2

2

像这样的东西可能会起作用：

#container {
    position:relative;
    overflow:visible;
}
#ear {
    position:absolute;
    left: 100%; /* hang over right edge */
    top: 0;
}

假设这个 HTML：

<div id="container">
    <div id="ear">Click me!</div>
    Look at me, I'm a moving box!
</div>
于 2013-09-19T15:52:04.473 回答
0

我正在使用这样的实现：

<div class="tooltip">
    <div class="tooltip-inner">I'm a tooltip</div>
    <div class="tooltip-ear"></div>
   <!--tooltip-ear last so you can float it over tooltip-inner without z-index-->
</div>

造型：

.tooltip { position: absolute; left: 0; top: 0; width: 200px; }
.tooltip-inner { padding-right: 10px; } /* make space for the ear */
.tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }

您可以为.tooltip-inner. 并有一个为耳朵做边框的图形。您可以将耳朵向左移动 1px，使其覆盖.tooltip-inner边框，使边框看起来流畅。

您甚至可以更进一步，通过更改一个类来添加.tooltip-orientation-top-left或.tooltip-orientation-bottom-right更改耳朵的位置。

您的样式将如下所示：

.tooltip.tooltip-orientation-top-left .tooltip-inner { padding-right: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-inner { padding-left: 10px; }
.tooltip.tooltip-orientation-top-left .tooltip-ear { position: absolute; right: 0; top: 0; width: 10px; height: 10px; }
.tooltip.tooltip-orientation-top-right .tooltip-ear { position: absolute; left: 0; bottom: 0; width: 10px; height: 10px; }
于 2013-09-19T16:02:13.037 回答