css里,怎样使多个div元素并列一行?

html-css030

css里,怎样使多个div元素并列一行?,第1张

想要让多个div元素并列成一行,可以将div元素的float属性设置为left。但这样做还不够,应为当浏

览器的宽度小于这几个div的宽度总和时还是会有div会跑到底部,所以需要将想要并列的div元素套

在另外一个大div里,当然,这个大div宽度要大于并排div宽度的总和。这样子,就可以做到怎么变

换窗口大小时div都不会跑到下面了。

以下是具体演示步骤:

1、打开一个HTML文件编辑器。先在里面输入HTML的基本元素。

2、在body标签里添加一个大div来容纳并列的div。

3、在大div里添加想要并列的div元素,并在style属性里添加float:left即可

4、运行效果。

可以使用弹性布局,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子容器之间的间距的方法。