javascript - 在图像 html 旁边键入文本

Question

我想在 contenteditable 中输入文字div放在图像的右边。

HTML

<div class="container">
<div class="image">
    <img src="/path/*.jpg" alt="" />
</div>
<div class="text" contenteditable>
    <p></p>
</div>
<div class="clear"></div>

CSS

.container {
    width: 1000px;
    border: 1px solid #000;
}
.image, .text {
    position: relative;
}
.image {
    width: 500px;
    height: 500px;
    overflow: hidden;
    float: left;
}
.text {
    min-height: 30px;
    border: 1px solid #000;
}
.clear{
    clear: both;
}

我的目标是当我聚焦到 contenteditable 时将插入符号定位在图像的右侧而不是 p 的开头tag正如你在这个 Fiddle 中看到的那样.

一个解决方案是插入一个  在<p> ，如其他 Fiddle 所示，但这不是一个非常干净的解决方案:它污染了写在里面的文本。

我可以利用 JavaScript 和 jQuery，但首选纯 HTML 和 CSS 解决方案

有什么想法吗？

更新 我忘了说文本也应该放在图像下面，这样它就不能 float 或隐藏

Answer 1

只需尝试 margin-left:500px;

.text {
    min-height: 30px;
    border: 1px solid #000;
    margin-left:500px;
}