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

html-css013

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

用css3的border-radius

#rcorners3 {

    border-radius: 25px//这里如果设定一个数值,则四个角为相同圆角,如果设定四个不同数值,则四个角不相同。

    background: url(图片.jpg)

    background-position: left top

    background-repeat: repeat

    padding: 20px 

    width: 200px

    height: 150px 

}

border-radius所有四个边角 :

border-*-*-radius 属性的缩写

border-top-left-radius定义了左上角的弧度

border-top-right-radius定义了右上角的弧度

border-bottom-right-radius定义了右下角的弧度

border-bottom-left-radius定义了左下角的弧度