Rumah > hujung hadapan web > html tutorial > html中多个div层并排显示_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 12:15:26
asal
1708 orang telah melayarinya

页面的中间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>
Salin selepas log masuk


//注意:并排显示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>
Salin selepas log masuk


用样式表来控制

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

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

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan