>웹 프론트엔드 >HTML 튜토리얼 >html中多个div层并排显示_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:15:261740검색

页面的中间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是自适应宽度的,不加浮动代码和宽度是不可以的

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.