div+css图片横向排列

html-css041

div+css图片横向排列,第1张

1、新建html文档。

2、书写hmtl代码。 <!-- 横向排列 -->  ,  <div id="nav">,<div id="box1">1</div>,<div id="box2">2</div>,<div id="box3">3</div>,</div>。

3、初始化css代码。<style>*{margin:0padding:0font-size:12pxfont-family:'Microsoft YaHei'},  </style>。

4、书写总体的css代码。

5、代码整体结构。

6、查看效果。

可以使用弹性布局,display: flex 就可以让div横排,默认布局轴方向就是横向,justify-content: space-between可以是div平均分布在水平轴上。