Question

我正在尝试使用javascript在图片列表中添加一些动画：

<script>
        $(function () {
            $('#rotate1').innerfade({
                animationtype: 'slide',
                speed: 750,
                timeout: 4000,
                type: 'sequence',
                containerheight: 'auto'
            });
        });
</script>

这是我的html代码，我正在使用<ul>标记图片列表来制作动画：

<div style="text-align:right; vertical-align: top; float: right; margin-top: 40px; margin-left: 20px; margin-right: 20px">
    <ul id="rotate1" style="list-style: none; width: 100%">
        <li><img src="~/Images/logo11w.png" alt="1" style="border:8px solid #d6d6d6;">first image text</li>
        <li><img src="~/Images/movies1.png" alt="1" style="border:8px solid #d6d6d6;">first image text</li>
    </ul>
</div>

当我设置ul id="rotate1"时，图片列表超出了我的页面边框，因为浮动是正确的。当我不id="rotate1"时，即使设置了右浮动，它也会停留在我的页面边框中。

如果ul标签中只有一个图像，则图像会停留在蛀虫中。如果从样式中删除右侧浮动，则图像将保留在边框中。

下面的图片就是我想要的样子 example image http://i59.tinypic.com/29gilcj.png 这是它使用id="rotate1"的方式 example image http://i61.tinypic.com/2ng5qag.png

编辑：创建一个小提琴： http://jsfiddle.net/naveedshr/7t7csaz0/

Answer 1

观察文字问题。它不会根据您的图像进行调整。图像设置为float，文本位于后面。图像将出现在文本前面。因此，对文本使用div并尝试将文本设置为float - left，right to right。

对于图像，我建议使用position: absolute代替浮点数，然后指定左右。

<div style="text-align:right; vertical-align: top; position:absolute; left:100; right: 100">
<!--All the other code here-->
</div>

我希望它完美无缺！

当向右浮动时，<ul>标签图像列表超出边界</ul>

1 个答案: