0

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

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

<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>

请在这里查看我的 JSFiddle

我究竟做错了什么？

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

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

4

6 回答 6

2

我想这就是你想要的！

我从中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>
于 2013-10-04T20:38:57.297 回答
1

这是一个 jsFiddle你所追求的。

我只是重新排列了一些 HTML：

<div class="subContext">
    <div class="boxImage">
        <img src="/img/dev/contentBoxSymbolicImage.jpg" />
    </div> 
    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>
于 2013-10-04T20:41:37.947 回答
0

我不确定这是否满足您的要求，但这是一种方法：

我删除了floatfromdiv.description并将其移动到 HTML 中的图像上方。
描述现在将环绕浮动图像。

一个警告是，如果文本比图像高，文本将在图像下方换行，但我不确定这是否对您不利。

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

<div class="boxImage">
    <img src="/img/dev/contentBoxSymbolicImage.jpg" />
</div>
<div class="description"> ... </div>

http://jsfiddle.net/dShYL/4/

于 2013-10-04T20:39:04.847 回答
0

将图像移到描述之前并float: left从描述 div中删除

HTML

<div class="subContext">
    <div class="boxImage">
        <img src="http://lorempixel.com/300/200" />
    </div>
    <div class="description">
        This is just a blindtext. This is just a blindtext. ... 
    </div>
</div>

更新了 JSFiddle

浮动元素的意思是粗略的，把它从正常的流中拿出来，放在它的容器的左边或右边，让后面的元素在它周围浮动。

于 2013-10-04T20:40:53.240 回答
0

为描述提供 width:85% 为我解决了这个问题。 http://jsfiddle.net/dShYL/8/

如果每个的图像大小不同，那么 js 将是要走的路，但对于 50*50，宽度 85% - 90% 应该可以解决

.contentBox .contentArea-inner .subContext .description {
        -webkit-backface-visibility: hidden;
        float: left;
        width:85%;

    }
于 2013-10-04T20:41:13.403 回答
0

您只需要为您的 div .description 指定一个小于 100% 的宽度。（由于图像是 50px 宽，它实际上需要小于 100%- 50px）

.description { width: 75%; }

工作小提琴：http: //jsfiddle.net/dShYL/6/

原因：浮动使块级元素的宽度取决于其子级。它将至少扩展到其父级的宽度，并且由于您内部的内容足够大，它使其扩展到整个宽度。

您还可以更改 .description 和 .boxImage 的顺序以使 .boxImage 位于第一位。虽然这在语义上不再正确，但是如果您不想为 .description 指定固定宽度，则可以使用

于 2013-10-04T20:42:33.550 回答