html - 当浏览器窗口大小改变时，div 绑定(bind)到其他 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 .