Question

我在图像周围浮动一个可疑的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/

提前致谢！

亚达夫

Answer 1

尝试让rgtDiv浮动：左;和宽度...... 应该工作，别忘了清理你的花车

Answer 2

您可以添加：

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

Demo

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

Answer 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;
}

Answer 4

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

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

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

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

Demo

Answer 5

strlen可用于contenteditable块：空伪类。请注意，它必须是空的：内部没有空格或标签，只有overflow: hidden

在浮动图像周围包装contenteditable div的CSS问题

5 个答案: