css如何让三张图片在一行里显示?

html-css0145

css如何让三张图片在一行里显示?,第1张

三个div代表上中下，上面用个div包裹一个div和一个ul，中间div里也是两个div表示上下两部分，这两部分里面又分左右两个div。最下的div里弄个P标签就行了。

让三张图在一行可以设置float：left或者float：right就行

1. 最简单的情况：设置这个属性就可以了，各浏览器都兼容：

display: inline-block

2. 如果图片需要以block显示，那么就麻烦点：

<div>

<style type="text/css">

img{margin:0pxpadding:0pxdisplay:blockfloat:left}

</style>

<img src="20120601165649_4.jpg"/>

<img src="20120601172023_4.jpg" style="margin-left: 10px"/>

<img src="20120601172645_4.jpg" style="margin-left: 10px"/>

</div>

3. 如果你的图片还有超链接，那么还有第三种情况了，需要给img标签添加border:0属性，不然的话，在IE下会出现蓝色边框：

<style type="text/css">

img{margin:0pxpadding:0pxdisplay:blockfloat:leftborder:0px}

</style>

<a href=""><img src="20120601165649_4.jpg"/></a>

<a href=""><img src="20120601172023_4.jpg" style="margin-left: 10px"/></a>

<a href=""><img src="20120601172645_4.jpg" style="margin-left: 10px"/></a>

</div>