Heim > Web-Frontend > HTML-Tutorial > html中多个div层并排显示_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2016-06-24 12:15:26
Original
1741 Leute haben es durchsucht

页面的中间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>
Nach dem Login kopieren


//注意:并排显示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>
Nach dem Login kopieren


用样式表来控制

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

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

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage