向右浮动文本而不是图像

Question

我正在尝试将图像推回标题下方的左侧。仅将描述文本浮动到右侧。我似乎无法清除图像浮动。

HTML：

<div class="title">System Displays</div>
<div class="description">Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. 
 <img src="http://dummyimage.com/400x200/000/fff" /> 
 Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div>

CSS：

.title {    
width: 200px;
float: left;
} 

.description{    
width: 200px;
float: right;
} 

.description img {
float: left;
clear: both; 
}

jsfiddle 更清晰。我无法插入任何额外的 HTML。感谢您的任何建议。

编辑：这个 [jsfiddle] 是我视觉上想要实现的目标。我不确定 position:relative; 是否合适。

Answer 1

您的 jsfiddle 与示例代码有很大不同。这是修复后的 jsfiddle 演示。

.description img {    
    width: 200px;
    float: left;
} 

如果您需要 .description 具有固定宽度，则您将需要另一个解决方案。你不能将任何东西漂浮在其容器之外。

这是使用绝对定位的另一种方法的示例。

.description img {
position:absolute;
top:25px; 
left:0;
width:200px;
}

演示

这是使用相对定位的另一种方法：

.description img {
    width:200px;
    position:relative;
    left:-220px;
    float:left;
    margin-bottom:-100px;
}

演示