作者LokiCjn (我的征途是星之海)
看板Web_Design
标题Re: [问题] CSS使用DIV排版方式的问题
时间Sun Nov 13 16:56:21 2005
我想把我的做法贴出来好了
看看还没有没地方可以再做修正
(很长一串 = =)
IE和Firefox确定可以正常显示
(CSS部份)
#main {
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:10px;
width:970px;
text-align: left;
}
#side {
width:200px;
float:left;
margin-right:10px;
}
.sideHead {
background-image:url(../images/sideHead_back.png);
width:200px;
height:20px;
float:left;
clear:left;
border:1px solid #CCCCCC;
border-bottom: 0px solid #F6F6F6;
}
.sideContent {
width:200px;
float:left;
clear:left;
margin-bottom:10px;
border:1px solid #CCCCCC;
background-color:#F6F6F6;
}
#content {
width:600px;
margin-left:auto;
margin-right:auto;
float:left;
border:1px solid #EEEEEE;
background-color:#FFFFFF;
}
#edge {
width:140px;
float:right;
margin-left:10px;
}
.edgeHead {
background-image:url(../images/sideHead_back.png);
width:140px;
height:20px;
float:right;
clear:right;
border:1px solid #CCCCCC;
border-bottom: 0px solid #F6F6F6;
}
.edgeContent {
width:140px;
float:right;
clear:right;
border:1px solid #CCCCCC;
background-color:#F6F6F6;
}
(HTML部份)
<div id="main">
<div id="side">
<div class="sideHead"> Side Head 01 </div>
<div class="sideContent"> Side Content 01 </div>
<div class="sideHead"> Side Head 02 </div>
<div class="sideContent"> Side Content 02 </div>
</div>
<div id="content"> Content </div>
<div id="edge">
<div class="edgeHead"> Edge Head </div>
<div class="edgeContent"> Edge Content </div>
</div>
</div>
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 218.174.144.156