首页 > web前端 > html教程 > 老年新手 请教DIV布局问题_html/css_WEB-ITnose

老年新手 请教DIV布局问题_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 12:22:49
原创
923 人浏览过

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,也是一个不错的方法。谢谢哈 

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