css如何让div横向排列

html-css09

css如何让div横向排列,第1张

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

使用css的margin属性设置。

1、首先打开hbuilder软件,新建一个html文件,在html里面写入html结构,在给每个子div设置一个class属性。2、接着在上方的style标签中设置这个名叫div的class的css样式,这里把文字字号放大并加入了边框,然后就可以使用margin属性设置子容器之间的间距了,margin中前面的是设置上下间距,后面的则是左右间距,最后根据自己的需要设置即可。3、来到浏览器即可看到效果,三个div的间距都是20px。以上就是cs设置div子容器之间的间距的方法。

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、查看效果。