Html Div无法包装交替图像_Html_Css_User Interface

Html Div无法包装交替图像

html css user-interface

Html Div无法包装交替图像,html,css,user-interface,Html,Css,User Interface,我自己无法解决这个问题，所以我决定借助UI黑客的帮助我试图做一个简单的设计，创建一个div，插入一个图像（它会留在左边，比第二张图片大），然后是一个文本（基本上包括带p的文本），然后在右边插入一个小图片。文本可以很好地包装左侧的图像，但问题是右侧的图像没有被图片包装以下是我正在编写的代码： <html> <head> </head> <body> <div style='overflow:hidden;width:600px;border

我自己无法解决这个问题，所以我决定借助UI黑客的帮助

我试图做一个简单的设计，创建一个div，插入一个图像（它会留在左边，比第二张图片大），然后是一个文本（基本上包括带p的文本），然后在右边插入一个小图片。文本可以很好地包装左侧的图像，但问题是右侧的图像没有被图片包装

以下是我正在编写的代码：

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


这是第二段，甚至没有进入现实，这是第二段，甚至没有进入现实的，生活的，残酷的网络生活。这是第二段，甚至没有进入现实的，生活的，残酷的网络生活。这是第一段，展示我们的产品是多么令人敬畏。就像w/e一样，这是第二段甚至没有进入现实，这是第二段甚至没有进入现实，真实，残酷的网络生活。这是第二段甚至没有进入现实，真实，残酷的网络生活……这是展示我们的产品是多么令人敬畏的第一段。就像w/e一样，这是第二段甚至没有进入现实，这是第二段甚至没有进入现实，真实，残酷的网络生活。这是第二段甚至没有进入现实，真实，残酷的网络生活……这是展示我们的产品是多么令人敬畏的第一段。像w/e

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

HTML:


这是第二段，甚至没有进入现实，这是第二段，甚至没有进入现实的，生活的，残酷的网络生活。这是第二段，甚至没有进入现实的，生活的，残酷的网络生活。这是第一段，展示我们的产品是多么令人敬畏。就像w/e一样，这是第二段甚至没有进入现实，这是第二段甚至没有进入现实，真实，残酷的网络生活。这是第二段甚至没有进入现实，真实，残酷的网络生活……这是展示我们的产品是多么令人敬畏的第一段。
就像w/e一样，这是第二段甚至没有进入现实，这是第二段甚至没有进入现实，真实，残酷的网络生活。这是第二段甚至没有进入现实，真实，残酷的网络生活……这是展示我们的产品是多么令人敬畏的第一段。比如w/e。

输出：

嗯，请自己编辑代码。除了html标记外，没有其他代码？您能创建一个演示此问题的示例吗？@Scott

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