HTML中将图片横排排列的代码怎么写

将多张图片做成并排的样式,可以使用浮动,也可以使用定位,根据不同的环境使用不同的代码,今天我们使用常用的浮动来做这种并排的效果。

操作方法

  • 01

    如图;建立几张图片,然后每张图片都用一个div小盒子包含,在4个盒子外面是最大的一个盒子;这样boss盒子就可以控制里面的小盒子了

  • 02

    如果这样带入图片,显示的效果是这样的;四张图片因为是在块状标签里面,所以是竖排排列的

  • 03

    现在对大盒子以及里面的图片进行简单的一点修饰;设置宽高,添加描边

  • 04

    现在效果是这样的

  • 05

    然后对div添加上浮动标签float:left;

  • 06

    这时候图片就发生变化了,竖排变成横排了,因为浮动的原因,最外面的边框仅剩一条线了,如图

  • 07

    需要将其浮动清除对下面的影响,在父级boss中添加个overflow:hidden;就可以了;然后在每个图片上添加些外边缘,将图片隔开

  • 08

    最后的效果就是这样的,如图

(0)

相关推荐

  • 视频:Excel电子表格中将图片设置为背景

    3、在Excel中将图片设置为背景:

  • 如何在wps演示中将图片变为圆形

    在wps演示中将图片变为圆形的方法 打开WPS.并选择创建一个新的空白模板. 选择"插入"或者页面的"形状"功能. 选择一个圆形的图形. 选择一张你要变圆的图片 ...

  • 在ppt中将图片调整为十字绣效果

    在ppt中插入图片后,可将图片调整为十字绣效果,怎么操作呢?下面我们一起来学习下吧! 步骤 打开ppt幻灯片,新建一个空白幻灯片. 点击插入-图片命令,找到图片存储位置,发现图片插入成功了. 然后选中 ...

  • 如何在ps软件中将图片背景设置为透明效果?

    相信很多小伙伴都有在使用ps软件,在其中如何才能将图片背景设置为透明效果呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开电脑上的ps软件.进入后,双击黑色区域任意处.2. 弹出下图所 ...

  • 如何在PS中将图片转为素描?

    相信很多小伙伴都有在使用PS,在其中如何才能将图片转为素描呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,在PS中打开我们要进行操作的图片.然后,同时按下"Ctrl" ...

  • 两招教你在PS软件中将图片旋转90°

    相信很多小伙伴都有在使用PS软件,在其中如何才能将图片旋转90°呢?方法很简单,下面小编就来为大家介绍.方法一:1. 首先,在PS软件中打开我们要旋转的图片,然后点击移动工具.2. 接着,点击页面上端 ...

  • 如何在华为手机中将图片设成桌面壁纸

    今天,小编给大家分享在华为手机中将图片设成桌面壁纸的方法,希望对大家有所帮助.具体如下:1. 首先,请大家在自己的手机中找到"文件管理"图标,点击进入主界面.2. 第二步,屏幕中出 ...

  • 一招教你在PS CC软件中将图片转换为PDF格式

    相信很多小伙伴都有在使用PS CC软件,在其中如何才能将图片转换为PDF格式呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开电脑上的PS软件.进入后,点击上端的"文件&qu ...

  • 如何在电脑版美图秀秀中将图片背景设置为白色?

    相信很多小伙伴都有在电脑上使用美图秀秀,在其中如何才能将图片背景设置为白色呢?方法很简单,下面小编就来为大家介绍.具体如下:1. 首先,打开电脑上的"美图秀秀".进入后,点击页面右 ...