您的当前位置:首页正文

如何用css使四个图片在网页上并列显示?

2011-02-08 来源:易榕旅游

有网友碰到这样的问题“如何用css使四个图片在网页上并列显示?”。小编为您整理了以下解决方案,希望对您有帮助:

解决方案1:

楼主您好。
在不使用任何CSS的情况下,您直接插入4张图片,比如:
<img src="1.gif" alt="1.gif" />
<img src="2.gif" alt="2.gif" />
<img src="3.gif" alt="3.gif" />
<img src="4.gif" alt="4.gif" />
它们就是在同一行显示的
-----补充-----
你贴的代码不能说明问题。
如果图片不能在一行显示,一般来说原因如下:
1.包含图片的容器宽度太小
2.图片的显示模式设置为了块级display:block

解决方案2:

1\定义一个width
2\定义display:block

解决方案3:

img {border: 1px solid #ccc; margin: 0px; padding: 0px;text-align:center;float:left;
}

解决方案4:

貌似本来就可以放到一行吧,你再说清楚一点

解决方案5:

用css使四个图片在网页中并列显示,首先要设置你div的css的宽度,具体的代码如下,想要满足您的要求可做部分修改:

<style>#imglist img{width:600px;height:2px;float:left;margin:0 3px;width:111px;height:18px;}</style>
<div id="imglist">
<img src="http://bbs.blueidea.com/images/default/logo.gif">
<img src="http://bbs.blueidea.com/images/default/logo.gif"><img src="http://bbs.blueidea.com/images/default/logo.gif">
<img src="http://bbs.blueidea.com/images/default/logo.gif">
<img src="http://bbs.blueidea.com/images/default/logo.gif"></div></font>

显示全文