2010-07-13 63 views
0

如何使用div創建兩列頁腳? (無表)創建兩個列頁腳使用div?

頁腳是980px它應該包含....

版權所有2010 xyz.com(左側)

關於我們|隱私|條款(右側)

+0

google for'兩列css佈局' – 2010-07-13 16:24:26

+1

@meder:用於兩列css佈局的谷歌搜索提供了非常多的結果,其中很少有與頁腳有關的。首先在海報中提供一點誠意。 – jrista 2010-07-13 16:31:00

+0

頁腳不是「特殊的」,它們就像任何其他元素一樣。它與包含content/sidebar列的包裝器沒有區別。 – 2010-07-13 16:34:19

回答

2

你可以做這樣的事情:

CSS:

.Footer_outer{ 
width: 980px; 
border: 1px solid; 
} 

.Footer_inner_left{ 
width: 49%; 
Float: left; 
display:inline; 
} 

.Footer_inner_right{ 
width: 49%; 
Float: right; 
display:inline; 
} 

HTML:

<div class="Footer_outer"> 
    <div class="Footer_inner_left">Copyright 2010 xyz.com </div> 
    <div class="Footer_inner_right">About us | privacy | terms </div> 
</div> 
+0

這將呈現一個982px的組合寬度元素。此外,浮標不被包含。 – 2010-07-13 16:37:25

+0

這是正確的答案,只需刪除「border:1px solid;」 – 001 2010-07-14 04:59:46

+0

非常感謝您的更新。 – Kangkan 2010-07-14 06:24:56

2

在你的CSS:

#footerLeft { width: 47%; float: left; display: block; 50px;} 
#footerRight { width: 47%; float: right; display: block; height: 50px; } 
#footer { width: 100%; height: 100% width: 980px; } 

HTML:

<div id="footer"> 
<div id="footerLeft">Copyright 2010 xyz.com</div> 
<div id="footerRight">About Us | Privacy | terms </div> 
</div> 

退房http://www.blueprintcss.org/框架,它將使生活更輕鬆。

+0

顯示:塊沒有必要,寬度:100%,其次是980px是多餘的,懷疑的高度:100%做任何事情。 – 2010-07-13 16:36:58

+0

加上你不包含浮游物。 – 2010-07-13 16:39:11

+0

正確 - 在#footer中不需要寬度:100% - 我應該在發佈之前進行校對。 – gnome 2010-07-13 16:39:21

0

CSS:

#footer { overflow:hidden; width:980px; margin:0 auto; } 
#footer #copy { float:left; display:inline; width:490px; } 
#footer #links { float:right; display:inline; width:490px; } 

HTML:

<div id="footer"><div id="copy">copyr..</div><div id="links">blah</div></div>