div+css怎么设置让5张图片均匀排列在一行

在css中,可以给div标签内的img元素设置float浮动属性,让所有图片浮动向一个方向,便可以实现排列成一行。下面小编举例讲解div+css怎么设置让5张图片均匀排列在一行。

东西/原料

  • html+css
  • 代码编纂器:Dreamweaver CS5

方式/步调

  1. 1

    新建一个html文件,定名为test.html,用于讲解div+css怎么设置让5张图片平均摆列在一行。

  2. 2

    在test.html文件内,利用div标签建立一个模块,下面将在div内添加图片。

  3. 3

    在test.html文件内,在div内,利用img标签建立五张图片,图片为images文件夹下面的2.jpg。

  4. 4

    在test.html文件内,编写<style type="text/css"></style>标签,页面的css样式将写在该标签内。

  5. 5

    在css标签内,经由过程类名和元素名称设置img样式,界说其宽度、高度为100px ,并利用float属性将所有图片界说浮动标的目的左,从而实现图片平均摆列在一行。

  6. 6

    在浏览器打开test.html文件,查看实现的结果。

    END

总结:

  1. 1

    1、在test.html文件内,利用div标签建立一个模块,在div内,利用img标签建立五张图片。

    2、在css标签内,利用float属性将所有图片界说浮动标的目的左(left),从而实现图片平均摆列在一行。

    END

注重事项

  • 也可以将图片浮动标的目的右(float:right),实现摆列在一行。
  • 发表于 2020-04-26 19:00
  • 阅读 ( 3045 )
  • 分类:其他类型

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
联系我们:uytrv@hotmail.com 问答工具