1

我自己无法解决，所以我决定使用 UI 黑客的帮助。

我试图通过创建一个div来做一个简单的设计，插入一个图像（它将留在左边，比第二张图片大），然后是一个文本（基本上包括带有p's 的文本），然后是一个小图片在右边。文本在左侧包裹图像就好了，但问题是右侧的图像没有被图片包裹。

这是我正在处理的代码：

<html>
<head>
</head>
<body>
<div style='overflow:hidden;width:600px;border:1px solid black;padding:5px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;'>
    <img src='../images/monkey.jpg' style='margin-right:7px;border:1px solid #C0C0C0;padding:5px;float:left;height:100px;width:125px;'/>
    <div style='word-wrap:break-word;'>
         this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e <img src='../images/monkey.jpg' style='margin-right:7px;border:1px solid #C0C0C0;padding:5px;float:right;height:50px;width:60px;'/>
    </div>
</div>
</body>
</html>
4

1 回答 1

2

它实际上工作正常，您只需要将图像放在文本中的较高位置。我删除了 div 包装器并将图像放在更高的位置，它可以工作：

jsFiddle 演示

HTML：

<html>
<head></head>
<body>
    <div style='overflow:hidden;width:600px;border:1px solid black;padding:5px;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;word-wrap:break-word;text-align:justify'>
        <img src='../images/monkey.jpg' style='margin:7px;border:1px solid #C0C0C0;padding:5px;float:left;height:100px;width:125px;'/>
        this is the second paragraph that has not even made it to the actual, this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. 
        <img src='../images/monkey.jpg' style='border:1px solid #C0C0C0;padding:5px;float:right;height:50px;width:60px;margin:7px;'/> 
        Like w/e this is the second paragraph that has not even made it to the actual,this is the second paragraph that has not even made it to the actual, live, brutal online life.this is the second paragraph that has not even made it to the actual, live, brutal online life..This is the first paragraph to demonstrate how awesome-ly our products being built. Like w/e.
    </div>
</body>
</html>

输出：

jsFiddle 演示截图

于 2012-04-13T22:46:39.453 回答