Question

css样式问题

<div class="">
<a onclick=""><img src="01.png" /></a>
<a onclick=""><img src="00.png" /></a>
<a onclick=""><img src="02.png" /></a>
</div>
如何将这三个图片显示在同一行，并且支持浏览器变大变小时候三个图片也是变大变小自动适应

Answer 1

把每个a标签放进一个li，再设置div里的li {float：left}这样图片就浮动在一行了

使用Javascript实现的图片自适应
使用Javascript自适应相对来说比较方便，唯一的麻烦是就是在网页中需要对image预设置onload事件处理resize()函数，如果对于动态网页来说还好一点，反正是动态的，程序里加上去就OK了，可是如果对于很多篇文章而言，在里头增加onload函数有点麻烦，除非一次性的写个脚本批量处理，否则后期更改或替换起来还是比较麻烦，比如图片的可显示宽度变化等等。
另一方面如果把宽度值写在Javascript中，那么将带来程序的通用性降低，下面的示例不是写死的，已测试效果比起CSS要HAPPY的多，网上也又很多类似的例子，不是不完成就是中间还存在某些问题，本文的例子应该会更好一点，笔者对不同的尺寸下的图片的显示效果做过好几种测试了。示例如下：
//RESIZE 图片自适应图片宽度和高度
//参数说明：
// obj是图片对象，this调用方法见下面示例
// maxW和maxH分别为约定的最大宽度和最大高度
function resizeimg(obj,maxW,maxH)
{
var imgW=obj.width;
var imgH=obj.height;
if(imgW>maxW||imgH>maxH)
{
var ratioA=imgW/maxW;
var ratioB=imgH/maxH;
if(ratioA>ratioB)
{
imgW=maxW;
imgH=maxW*(imgH/imgW);
}
else
{
imgH=maxH;
imgW=maxH*(imgW/imgH);
}
obj.width=imgW;
obj.height=imgH;
}
}
上例的使用示例：<img src="/www.metsky.com/logo.gif" onload="resizeimg(this,600,1024);"/>
我们在制定宽度和高度值的时候，一般宽度是肯定需要限定，而高度经常不需要限制，所以可以把高度指定的大一点，如果高度也限制，那么相当于制定一个 image box，下面的程序或许对您很有用（不限制图片高度的忽略下面这个示例）。
当指定图片BOX的时候，一般都还需要在图片自适应之后显示在BOX容器的中间，也就是水平和垂直都需要居中。首先需要指定BOX容器的宽度和高度，然后可以使用CSS来控制显示效果，也可以使用Javascript控制显示效果。示例如下：
IMAGE BOX容器：
<div id="imgbox" style="width:800px;height:800px;border:1px solid #CCCCCC">
<img src="..." onload="resizeimg(this,600,600)"/>
</div>
CSS显示方法如下：
#imgbox {text-align:center;vertical-align:middle;}
#imgbox img {vertical-align:middle;}

或使用Javascript完成：
在上文resizeimg()函数里最后只需要增加类似这样的语句，
obj.style.margin-left=(800-imgW)/2;
obj.style.margin-top=(800-imgH)/2;
即可，当然了，您总不能让resize尺寸本来就超出BOX容器尺寸吧，否则图片就把容器撑大，style风格肯定就对不上了。

Answer 2

给图片左浮动，把A给个块标签，就可以再一行了，图片大小问题可以把div只定义高度，宽度定义百分之百

Answer 3

这个是要用事件去实现，JS能做

Answer 4

img{float:left: display:inline;}
跟随浏览器变大小就用JS控制咯
var iewidth = document.documentElement.clientWidth;
var ieheight = document.documentElement.clientWidth;
var imgslength = document.getElementsByName('imgs').length;
for(var a=0;a<imgslength;a++){
document.getElementsByName('imgs').item(a).style.width = iewidth*0.5 + 'px';
document.getElementsByName('imgs').item(a).style.height = ieheight*0.5 + 'px';
}
//只给了其中IE浏览器的方法

直接用CSS
style="width:50%; height:70%;"