masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 老年新手 请教DIV布局问题_html/css_WEB-ITnose

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

WBOY
Lepaskan： 2016-06-24 12:22:49
asal
925 orang telah melayarinya

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>
Salin selepas log masuk

哈，原来是我id="foot" 写成if="foot"
改过来就行了。DW没有纠错功能，真失败。

另外，用一个div包住浮动的left和right，也是一个不错的方法。谢谢哈 

Label berkaitan：
老年新手 请教DIV布局问题
sumber：php.cn
Artikel sebelumnya：iframe中的submit问题_html/css_WEB-ITnose Artikel seterusnya：javascritp 操作 css_html/css_WEB-ITnose
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
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2205
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2354
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1971
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1857
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1921
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan