作者s9523752 (Wayne Chang)
看板Web_Design
標題[問題] 請問背景自適應文章內容的長度
時間Thu Jul 11 19:49:12 2013
我想做一個網頁,如下圖
http://ppt.cc/k78D
a和c各自置頂和置底
b隨著f和g內容的長度做變化
deh都固定不變
可是我做出來的如下...變得很詭異...
圖檔
test1.png 960*90 px
http://ppt.cc/JU~z
test2.png 960*47 px
http://ppt.cc/XgjV
html
<body>
<div id="title">
<div id="title1">
<h1></h1>
</div>
</div>
<div id="background">
<div id="main"><img src="test1.png"></div>
<div id="content">
<div id="content_1">
<h2></h2>
<h3></h3>
<h4></h4>
<h3></h3>
<h4></h4>
<h3></h3>
<h4></h4>
<h3></h3>
<h4></h4>
<h3></h3>
<h4></h4>
<h3></h3>
<h4></h4>
</div>
<div id="content_2"></div>
</div>
</div>
<div id="footer"><img src="test2.png" /></div>
</body>
css
@charset "utf-8";
/* CSS Document */
#title {
background:#F9F5ED;
width:auto;
height:74px;
margin:0 0 0 0;
}
#background {
background:#FCECCD;
width:auto;
height:100%;
position:static;
margin:0 0 0 0;
}
/*背景*/
#title1 {
margin-left:auto;
margin-right:auto;
width:960px;
height:auto;
}
#main {
margin:0 auto;
width:960px;
height:auto;
}
/*頁首*/
#content {
margin:0 auto;
padding:inherit;
width:960px;
height:100%;
}
/*內文總框架*/
#content_1 {
float:left;
display:inline;
width:600px;;
height:auto;
}
/*內文左框架*/
#content_1 h2 {
font-size:1.5em;
color:#39;
background-color:#def;
border-bottom:dotted 3px #6bd;
}
#content_1 h3 {
font-size:1.2em;
color:#39;
background-color:#def;
border-bottom:dotted 1px #6bd;
}
#content_1 h4 {
font-size:1em;
color:#39;
background-color:#def;
}
/*文字設定*/
#content_2 {
margin:0 auto;
float:right;
display:inline;
width:300px;
height:auto;
}
/*內文右框架*/
#footer {
background:#F9F5ED;
float:none;
text-align:center;
width:auto;
height:auto;
}
/*頁尾*/
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.180.106.144