Div+CSS 製作三欄式頁面配置(左右高度隨中間內容自動調整)

來源:互聯網
上載者:User

以下為CSS檔案內容,檔案名稱為1.css

body<br />{<br />font: 100% 宋體, Arial, Helvetica, sans-serif;<br />background: #666666;<br />margin: 0px;<br />padding: 0px;<br />text-align: center;<br />}<br />#container<br />{<br />width: 780px;<br />background: #FFFFFF;<br />margin: 0px auto;<br />padding: 0px;<br />border: 0px;<br />}</p><p>#header<br />{<br />background: #DDDDDD;<br />padding: 0px;<br />margin:0px;<br />width:100%;<br />}</p><p>#contentContainer<br />{<br />width: 100%;<br />background: #FFFF00;<br />padding:0px;<br />margin:0px;<br />overflow:hidden;<br />}<br />#contentLeft<br />{<br />background: #ff0000;<br />float:left;<br />padding: 0px;<br />margin:0px;<br />width:200px;<br />padding-bottom:100000px;<br />margin-bottom:-100000px;<br />}<br />#contentRight<br />{<br />background: #0000ff;<br />float:left;<br />padding: 0px;<br />margin:0px;<br />width:200px;<br />padding-bottom:100000px;<br />margin-bottom:-100000px;<br />}<br />#content<br />{<br />background: #00ff00;<br />padding: 0px;<br />margin:0px auto;<br />width:380px;<br />float:left;<br />}</p><p>#footer<br />{<br />clear:left;<br />background: #DDDDDD;<br />padding: 0px;<br />margin:0px;<br />width:100%;<br />}

 

 

以下是HTML頁面

 

<html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title>test</title><br /><link type="text/css" rel="stylesheet" href="1.css" mce_href="1.css" /><br /><mce:script type="text/javascript"></mce:script><br /></head></p><p><body><br /><div id="container"><br /> <div id="header"><br /> 標題<br /> </div><br /> <div id="contentContainer"><br /> <div id="contentLeft"><br /> left<br /> </div></p><p> <div id="content"><br /> content<br /> <br /><br /> asf<br /> <br /><br /> sdfsa<br /> <br /><br /> safs<br /> </div></p><p> <div id="contentRight"><br /> right<br /> </div></p><p> </div><br /> <div id="footer"><br /> 腳註<br /> </div><br /></div><br /></body><br /></html></p><p>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.