当浏览器窗口大小改变时，Div绑定到其他div

Question

我有以下问题：

无论浏览器窗口大小如何，语音气泡都应始终指向眼睛。

JSFiddle here

到目前为止，我有以下代码：

<div class="container1">
    <div class="container2">
         <button class="eye"></button>
         <div class="speech-bubble">View</div>
    </div>
</div>

其中

.container1 {
    text-align: center;
    display: -webkit-box;
    display: -webkit-flex;
    width: 100%; }

.container1 > .container2 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;}

.speech-bubble {
    position: absolute;}

但这不起作用并产生上述输出。 我能做些什么才能让它发挥作用？请不要使用jQuery解决方案，因为我使用Angular。

修改：如果省略text-align: center，代码将达到预期效果。但并不完全：我希望按钮居中！并且还有上述效果！我该怎么做？

Answer 1

在没有太多黑客的情况下进行管理。 将.container2更改为

.container1 > .container2 {
    margin: 0 auto;
}

请参阅this fiddle。

Answer 2

你的意思是这样吗？

JSFiddle

对于绝对位置，您不必使用left: (x amount)px or %;。在某些情况下，使用right: (x amount)px or %;会更容易。顺便说一句，如果你想将一个元素绝对定位到它的父元素，那么父元素也需要一个定义的位置，例如：position: relative;。如果不是，绝对位置元素将查找位置设置不是默认值的最近父元素。希望这会有所帮助。