作者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