CSS 挫折:如何将不同宽度的浮动图像置于 LI 标签内?
我正在开发一个具有 javascript 图像旋转器的网页,但它需要能够处理不同尺寸的图像。
我用作基础的代码在包含图像的浮动 LI 外部有一个 DIV,但无论我尝试什么,我似乎都无法使图像全部居中。唯一居中的是宽度为 800 像素的那一个。
我有一种感觉,这与浮动、位置或显示有关,但我已经搞砸了几个小时了,但没有运气。
这是我的网站:
这是我借用图像旋转器代码的地方: http://www.serie3.info/s3slider/ (代码)http://www.serie3.info/s3slider/demonstration.html(演示)
感谢您提供的任何帮助提供!
I'm working on a webpage that has a javascript image rotator, but it needs to be able to handle images of different sizes.
The code that I'm using as a base has a DIV outside floating LIs which contain the images, but no matter what I try I can't seem to get the images to all be centered. The only one that's centered is the one that's the full 800px wide.
I have a feeling it's something to do with float, position, or display, but I've been messing around for hours with no luck.
Here's my site:
Here's where I borrowed the image rotator code from:
http://www.serie3.info/s3slider/ (code) http://www.serie3.info/s3slider/demonstration.html (demo)
Thanks for any help you can provide!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这也有效(在 Firefox 和 Safari 中,还没有尝试过 IE)。另存为 .html 作为示例。
This works as well (In Firefox and Safari, haven't tried IE). Save as a .html for an example.
添加:
到
#slider1Content
样式。然后从
.slider1Image
样式中删除float: left;
。请注意,源 CSS 包含此警告:在多个维度上“重要的是与图像宽度相同”。由于此 CSS 并未针对每个图像调整大小,因此每张图片周围都会有白色边距。
如果您希望动态重置这些关键维度(我认为没有这个网站看起来还不错),那么这是一个单独的问题,之前已经在这里回答过。
Add:
to the
#slider1Content
style.Then delete the
float: left;
from the.slider1Image
style.Note that the source CSS contains this warning: "important to be same as image width" on several dimensions. Since this CSS isn't sized for each image, you'll have that white margin around each picture.
If you desire to reset those key dimensions dynamically (I think the site looks OK without this), then that is a separate question that has been answered here on SO before.