怎么设置css,把放在一个div中的图片横着排列

html-css025

怎么设置css,把放在一个div中的图片横着排列,第1张

1、新建一个html文件,命名为test.html,用于讲解。

2、在test.html文件内,创建一个div模块,并设置其class属性为mydiv。

3、在div模块内,使用img图片标签创建两张图片,src属性指向不同的图片路径。

4、在css标签内,使用“*”初始化页面所有元素的css样式,设置内边距为0,外边距为0。

5、在css标签内,设置div的样式,设置其宽度为700px,高度为400px,边框为1px,居中对齐。

6、在css标签内,设置图片的的大小,宽度为280px,高度为200px,为了使用图片水平排列,需要使用float属性设置图片浮动的统一方向,例如,这里设置统一浮动向左。

7、在浏览器打开test.html文件,查看图片水平排列的效果。

css如何让三个div并排展示,其实就是设置一个浮动点,让三个div靠左或者靠右浮动;

主要标签用于:float:left(靠左对齐)float:right(靠右对齐):示例如下:

1、首先打开用到的编辑工具这里用DW

2、为了方便观察,我们把三个div设置三个背景颜色来观察,设置三个div样式这里取名:div1 div2 div3 并且引用三个样式;

详解:background:#颜色;是取的三个不同的div背景颜色;给三个div设置宽度为width:300px高度height:200px

3、展示出来的效果如图:

方法和详细的操作步骤如下:

1、第一步,创建一个新的html文件,并将其命名为test.html进行演示,见下图,转到下面的步骤。

2、第二步,执行完上面的操作之后,创建一个div模块并将其class属性设置为mydiv,见下图,转到下面的步骤。

3、第三步,执行完上面的操作之后,使用img图片标签创建两个图片,并且src属性指向不同的图片路径,见下图,转到下面的步骤。

4、第四步,执行完上面的操作之后,使用“

 *”初始化页面上所有元素的css样式,将内部边距设置为0,将外部边距设置为0,见下图,转到下面的步骤。

5、第五步,执行完上面的操作之后,设置div的样式,将其宽度设置为700px,将高度设置为400px,边框设置为1px,居中对齐,见下图,转到下面的步骤。

6、第六步,执行完上面的操作之后,设置图片的大小,宽度为280px,高度为200px。

 为了使用图片的水平排列,需要使用float属性设置图片浮动的统一方向,见下图,转到下面的步骤。

7、第七步,执行完上面的操作之后,在浏览器中打开“test.html”文件,两张连续的图片已经在同一行,见下图。这样,就解决了这个问题了。