首页 > web前端 > html教程 > html中多个div层并排显示_html/css_WEB-ITnose

html中多个div层并排显示_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:15:26
原创
1708 人浏览过

页面的中间div层中有三个层。1,2,3
想让这三个层并排显示,在火狐中可以显示但在ie中中间和后面的层都掉下来了。
请教高手如何解决。。。。


回复讨论(解决方案)

代码贴出来~~


1

2

3


想让外面div里面的三个div并排显示,随着浏览器大小的改变,层会掉下来。请教师什么原因

没人帮我啊

<style type="text/css"><!doctype html><style type="text/css">#pages {width:900px;background-color:black;margin:auto;}#d1 {width:200px;height:100px;float:left;background-color:red;}#d2 {width:200px;height:100px;float:left;background-color:yellow;}#d3 {width:200px;height:100px;float:left;background-color:green;}</style><div id="pages"><div id="d1"></div><div id="d2"></div><div id="d3"></div></div>
登录后复制


//注意:并排显示div的所有宽度之和不能大于父div的宽度

上面的代码:第一行多写了,去掉:

<!doctype html><style type="text/css">#pages {width:900px;background-color:black;margin:auto;}#d1 {width:200px;height:100px;float:left;background-color:red;}#d2 {width:200px;height:100px;float:left;background-color:yellow;}#d3 {width:200px;height:100px;float:left;background-color:green;}</style><div id="pages"><div id="d1"></div><div id="d2"></div><div id="d3"></div></div>
登录后复制


用样式表来控制

也可以改成width用百分比控制,会根据页面的大小,自动控制div的宽度~~

谢谢各位,之前容易掉下来是因为不在一个层中。谢谢你们。。。

DIV是自适应宽度的,不加浮动代码和宽度是不可以的

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板