关于marquee中显示文字+图片的排版有关问题

关于marquee中显示文字+图片的排版问题
实现代码如下:
<marquee scrolldelay="1" direction="left" scrollamount=2 width=1040 height=120 onMouseOut="this.start()" onMouseOver="this.stop()">
       <img src="img/man1.jpg" align="bottom"/>人物介绍1:XXXXXXXXXXX
       <img src="img/man2.jpg" align="bottom"/>人物介绍2:XXXXXXXXXXX
       <img src="img/man3.jpg" align="bottom"/>人物介绍3:XXXXXXXXXXX
       <img src="img/man4.jpg" align="bottom"/>人物介绍4:XXXXXXXXXXX
       <img src="img/man5.jpg" align="bottom"/>人物介绍5:XXXXXXXXXXX
       <img src="img/man6.jpg" align="bottom"/>人物介绍6:XXXXXXXXXXX<br /></marquee>

运行后的效果如图:
关于marquee中显示文字+图片的排版有关问题

现在我想实现如下的2种效果,不知道该怎么改呢?请教:
效果1:关于marquee中显示文字+图片的排版有关问题
或者效果2:关于marquee中显示文字+图片的排版有关问题
------解决方案--------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div
        {
            float:left;
            width: 300px;
            word-break:break-all;
            word-wrap : break-word ;
            margin:0 100px 0 0;
        }
        img
        {
            float: left;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <img src="http://img.my.csdn.net/uploads/201212/12/1355278674_2334.png"/>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    </div>
    <div>
        <img src="http://img.my.csdn.net/uploads/201212/12/1355278674_2334.png"/>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    </div>
    <div>
        <img src="http://img.my.csdn.net/uploads/201212/12/1355278674_2334.png"/>
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX