怎样让三个div在一个父级DIV下,并排显示

作者:如沐春风 | 创建时间: 2023-08-06
但网页设计师在进行网页设计时,经常会遇到想将多个div进行并排显示的问题,那么我们可以通过怎样的简便方法就可以让三个div在一个div下并排显示呢,小渔这就为大家一一道来。...
怎样让三个div在一个父级DIV下,并排显示

操作方法

首先我们需要打开自己电脑上安装的DW软件,然后新建一个html页面,并保存在桌面上。

然后我们需要在该html页面的body部分敲入部分代码,基本上就是一个父级DIV下面有三个子级DIV。

然后我们在三个子div中输入文字,然后在浏览器中测试,查看效果,可以看到默认情况下三个div是竖排显示的。

接下来我们要这四个div赋予class属性,使之具有不同的样式,方便大家查看效果。

我们切换到浏览器的界面,对刷新,可以看到更改之后的页面效果,相对之前,可以很方便的区分出三个div

接下来就是最关键的步骤,我们应该怎样设置可以让三个div换成并排显示?只需要为三个中的前两个设置float:left属性,最后一个设置float:right属性,或者是float:left属性,都可以

之后再到浏览器中查看,就可以发现三个div并排显示了。至此我们也就大功告成了。

温馨提示

三个子div的宽度必须小于父级div的宽度,否则会换行显示。
对于第三个div,float:left或者float:right均可以,但是一个是左浮动,一个是右浮动,还是有点区别的。大家什么时候用哪种浮动是要依据我们想达到的效果来定的。
点击展开全文

更多推荐