老年新手 请教DIV布局问题_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 12:22:49863검색
div布局
为什么页脚会跑上去呢？如图A
B
1
2
3
4
5
这是我的脚
回复讨论(解决方案)
你说的页脚是?
我试了下效果没错啊?
就是红色部分“这是我的脚” 本来是页脚的。现在跑到左边去了。
哦这是因为你没有清除浮动
left和right都是浮动的div 后边的div会放在它们下边(并且尽可能的贴着放)
在foot这个div之前加一个
或者用一个div把left和right包起来 就可以了.
另外你这个盒子模型还有个小问题 foot的id写成了"if"
http://www.colg.biz/demo/d1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <meta charset="utf-8"><title> 固定宽带且剧中页面</title><style>body {padding:0; margin:0; text-align:center;}#main {width:800px; padding:0; margin:0 auto; background:#900}#header { width:100%; height:100px; background:#06F}#left { float:left; width:300px; background:#936}#right { float:right; width:500px; background:#366}#foot {background:#90F;width:100%; height:50px}.clear {clear:both;}</style></head><body><div id="main"> <div id="header"> </div><div> <div id="left"> <p>A</p> <p>B</p> <p> </p> </div> <div id="right"> <p>1</p> <p>2</p> <p>3 </p> <p>4</p> <p>5</p> </div> <div class="clear"></div></div> <div id="foot"> 这是我的脚 </div></div></body></html> 哈，原来是我id="foot" 写成if="foot"
改过来就行了。DW没有纠错功能，真失败。
另外，用一个div包住浮动的left和right，也是一个不错的方法。谢谢哈
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.