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

html-css023

如何用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

1，可以用弹性容器来实现居中。

2，用<p align="centger"><img src="###"></p>来实现居中。

3，容器和图片都设置宽度高度，已经知道宽度高度情况下，用margin-top,margin-left等方式来设置居中。

3，用相对定位方式实现居中。margin:0 auto

4,对容器设置text-align:center方式来实现居中。

你好！这个当然是可以的啊。我布局一下给你，你参考一下：

<div style="width:100pxmargin:0px 10px 0px 0pxfloat:left"><img border="0" src="image/1.jpg" width="100" height="110" /></div>

<div style="width:210pxfloat:left">

<div style="width:100pxfloat:left"><img border="0" src="image/2.jpg" width="100" height="50" /></div>

<div style="width:100pxmargin:0px 0px 0px 10pxfloat:left"><img border="0" src="image/3.jpg" width="100" height="50" /></div>

<div style="width:100pxmargin:10px 0px 0px 0pxfloat:left"><img border="0" src="image/4.jpg" width="100" height="50" /></div>

<div style="width:100pxmargin:10px 0px 0px 10pxfloat:left"><img border="0" src="image/5.jpg" width="100" height="50" /></div>

</div>

以上都是按照你图像样式来做的，都是以图片布局形式，你可以参考一下。

希望我的回答能令你满意！