Div无法包裹交替图像

时间：2012-04-13 22:17:56

标签： html css user-interface

无法自己解决，所以我决定使用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>

1 个答案:

答案 0 :(得分：2)

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

<强> jsFiddle demo

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

相关问题
最新问题