1、在需要的html页面的body部分敲入代码,基本上是一个父级DIV下面有三个子级DIV。
<div>
<div></div>
<div></div>
<div></div>
</div>
2、然后在三个子div中输入文字,然后在浏览器中测试,查看效果,可以看到默认情况下三个div是竖排显示的。
<div>
<div>明天</div>
<div>你好</div>
<div>牛奶咖啡</div>
</div>
3、接下来对三个div进行class设置,如下图所示。
4、然后只需要为三个中的前两个设置float:left属性,最后一个设置float:right属性,或者是float:left属性,都可以实现并排排列。
5、之后再到浏览器中查看,就可以发现三个div并排显示了。如下图所示。
让两个div并排方法:可以采用浮动的方法,只要宽度足够,两个div就可以在一排显示。打div里面包含两个小div。
方法如下:
1、创建一个大div。
代码如下:
#main {float:leftborder:1px width:100% }
2、创建一个左边小div
代码如下:
#left{float:leftborder:1px width:40% }
3、创建一个右边小div
代码如下:
#right {float:leftborder:1px width:40% }
4、制作成css文件,或者直接添加到网页上,就可以实现并排显示。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)