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解决方案

有什么想法吗？

更新我忘了说文本也应该在图像下面，所以不能浮动或隐藏

Answer 1

只需尝试margin-left：500px;

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

Answer 2

添加溢出：隐藏到不应覆盖浮动元素的元素中：

http://jsfiddle.net/nothrem/0mdcLzqs/3/

<div class="container">
    <div class="image">
        <img src="https://ununsplash.imgix.net/photo-1417021423914-070979c8eb34?fit=crop&fm=jpg&q=75&w=1050" alt="" />
    </div>
    <div class="text" contenteditable style="overflow:hidden">
        <p></p>
    </div>
    <div class="clear"></div>
</div>

更新：您可以使用Javascript根据元素的内容更改溢出

document.getElementsByClassName('text')[0].onblur = function() {
    if (this.innerHTML.replace(/<[^>]+>/, '')) { //remove HTML tags
        this.style.overflow = 'visible';
    } else {
        this.style.overflow = 'hidden';
    }
}

完成编辑后模糊，您可能想要添加其他事件，例如onkeyup，onmouseclick等。

Answer 3

你必须删除div并申请成像这些css样式：

display:    -moz-inline-stack;
display:    inline-block;
_overflow:  hidden;
*zoom:      1;
*display:   inline;

与

vertical-align: bottom;

Answer 4

除非必要，否则我不喜欢浮动广告，我会从图片CSS中移除float: left并将这两行添加到.image, .text一行：

display: inline-block;
vertical-align: top;

Answer 5

获取图片下方的文字

将容器宽度设置为图像的宽度，并按照左右浮动设置文本的位置：

.container {
  width: 500px; // width of image
  border: 1px solid #000;
}
 .image, .text {
 position: relative;
}
.image {
width: 500px;
height: 500px;
overflow: hidden;
float: left;
}
.text {
min-height: 30px;
width:100%;
border-top: 1px solid #000;
float:left;
text-align:center;  
}
.clear{
clear: both;
}

这是demo

在图像html旁边键入文本

HTML

CSS

5 个答案: