Re: [問題] CSS使用DIV排版方式的問題
我想把我的做法貼出來好了
看看還沒有沒地方可以再做修正
(很長一串 = =)
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
討論串 (同標題文章)
以下文章回應了本文：
完整討論串 (本文為第 8 之 9 篇)：
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章