> 웹 프론트엔드 > HTML 튜토리얼 > 老年新手 请教DIV布局问题_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 12:22:49
원래의
924명이 탐색했습니다.

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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿