围绕浮动图像包装 contenteditable div 的 CSS 问题答案

【问题标题】：CSS Issue in wrapping contenteditable div around Floating image围绕浮动图像包装 contenteditable div 的 CSS 问题
【发布时间】：2014-01-09 20:19:41
【问题描述】：

我在围绕图像浮动内容可编辑的 div 时遇到问题。这是我的代码：

HTML：章节标题

CSS：

.fl {
    float: left;
}

.rgtDiv {
    min-height: 300px;
    border: solid 1px #ccc;
}

我希望rgtDiv 在图像的右端有左边框，但现在它出现在图像的左端。

当我点击rgtDiv 时，光标会转到图像而不是rgtDiv 内。如何让光标进入rgtDiv内？

rgtDiv 的边框也适用于整个父 Div。如何让它只申请rgtDiv。

谁能帮助解决我的问题？

这是我的 jsfiddle 链接：http://jsfiddle.net/n8WJ2/

提前致谢！

亚达夫

【问题讨论】：

标签： html css css-float contenteditable word-wrap

【解决方案1】：

尝试给 rgtDiv 一个浮点数：left;和一个宽度... 应该工作，不要忘记清除你的花车

【讨论】：

将 display: inline-block 添加到您的 rgtDiv css 规则，并将该类提供给您尝试影响的 div。
如果你只是想用你的内容包围图像，那么只需将带有 img 的 div 移动到内容 div 中。
@Kevin，如果我浮动 rgtDiv 并设置宽度，当我在 rgtDiv 内输入多于一行的内容时，rgtDiv 会出现在图像下方。
@nocturns2，我希望图像脱离内容 div，因为我将为该内容 div 应用 CKEditor 插件。当我输入更多内容时，display:inline-block 也会导致 rgtDiv 位于图像下方。
您不能在图像周围环绕边框。

【解决方案2】：

你可以添加这个：

.rgtDiv {
    position: relative;
    overflow:hidden;
    min-height: 300px;
    border: solid 1px #ccc;
}

Demo

它将根据图像的宽度调整大小。

【讨论】：

谢谢滴！但我希望内容环绕图像。这不是围绕图像包装内容

【解决方案3】：

试试这个

HTML

<div>
 <div class="section-title">Section title</div>
 <div class="rgtDiv">
  <img src="http://www.destination360.com/north-america/us/montana/images/s/great-falls.jpg" height="300" width="300"/>
 <div contenteditable="true" class="editableblock"></div>
</div>

CSS

.fl, .rgtDiv img  {
 float: left;
}

.rgtDiv {
 border: solid 1px #ccc;
 display:block;
}

.editableblock {
 min-height: 300px;
}

【讨论】：

现在它将文本包裹在图像周围，但如果我将边框应用于可编辑块，它将与图像一起应用于整个容器。不能单独对可编辑块应用边框吗？

【解决方案4】：

如果还有人在乎的话。要解决插入符号位置的问题，您可以在 HTML 中为 div 添加零宽度空间：

<div contenteditable="true" class="rgtDiv">&#8203;</div>

并在每次用户清除它时恢复它：

$('.rgtDiv').keyup(function(){
    if($(this).text().length == 0){
        $(this).text('\u200B');
    }
});

Demo

【讨论】：

【解决方案5】：

overflow: hidden 可用于 contenteditable 块 :empty 伪类。请注意，它必须是真正的空：里面没有空格或制表符，只有<div contenteditable="true"></div>

【讨论】：