浮动的div与满足的插入位置一致

Question

我有这个标记：

HTML

<div class="figure">
   <img src="path/to/img" alt=""></div>
<div class="ce" contenteditable="true">
    <p></p>
</div>

CSS

.figure {
    width: 540px;
    height: 540px;
    overflow: hidden;
    float: left;
}
.figure img {
    height: 540px;
}
.ce {
    width: 100%;
    min-height: 30px;
}

正如您可以在此fiddle中进行测试，当您将插入符号放在contenteditable caret位于div.figure上方时，位于左侧。当您开始倾斜时，插入符号会被放置到div.figure，这就是我想要的。 我的目标是在焦点上将插入符号放在您开始键入时所处的准确位置。 我怎样才能做到这一点？ 我在display: inline-block .ce上尝试使用div，但这会带给我其他问题。