css - 使用动态相对定位在父容器中将一个 DIV 向左浮动，另一个向右浮动

Question

我有一个父容器，我想在其中放置一个填充整个宽度的文本元素，直到它达到限制，这应该由一个被吸引到父容器右侧的图像定义。

不幸的是，无论我尝试什么，文本仍然覆盖整个宽度，而图像出现在文本 block 下方。

<div class="subContext">
    <div class="description">
        This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. 
    </div>
    <div class="boxImage">
        <img src="about:blank" alt="I want to be on the right" />
    </div>
</div>

Please see my JSFiddle here

我做错了什么？

我正在寻找至少向后兼容 IE 8 并且不使用 javascript 的跨浏览器解决方案。

注意:我觉得这一定是非常基础的 CSS。仍然这样做。然而我已经搜索并尝试了许多可能的解决方案，但没有一个对我有用。我可能只是缺少关键的关键信息/理解。

Answer 1

I think this is what you want!

我从中取出了 float: left; 并重新排序了您的 HTML。

.contentBox .contentArea-inner .subContext .description {
    -webkit-backface-visibility: hidden;
}

HTML:

<div class="boxImage">
    <img src="/img/dev/contentBoxSymbolicImage.jpg" />
</div>
<div class="description">
 This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. 
</div>