（以px為單位指定所有分段寬度 ）
這個樣式中, 使用了 float 屬性, 並使所有的段落都對齊至同一個方向。本例中, 所有的段落都指定以「float:left」。每個分段的寬度都予以固定, 並針對這 3 個分段的整體使用 div 要素（id="content"）定義出範圍。這麼做是為了防止當視窗寬度較窄時其中一個段落會被擠到另一個段落的下方。在 N4.x 中將無法正確顯示。此外在 Mac 版的 IE4.x 中, 標題與內文之間會出現間隙。

IE6.0
IE5.5
IE5.0
IE4.0
N7.x
N6.x
N4.x
Opera7
Opera6
Safari
IE5Mac
IE4Mac
●
●
●
●
●
×
●
●
●
●
●
▲

× 表無法支援；▲表部分支援；●表完全支援

CSS 原始碼

body {
margin: 0;
padding: 0;
}
#header {
width: 600px;
}
#content {
width: 600px;
}
#menu {
width: 150px;
float: left;
}
#main {
width: 250px;
float: left;
}
#sub {
width: 200px;
float: left;
}
#footer {
clear: both;
width: 600px;
}

 

HTML 原始碼

<div id="header">
<p> ~內文省略~ </p>
</div>

<div id="content">
<div id="menu">
<p> ~內文省略~ </p>
</div>
<div id="main">
<p> ~內文省略~ </p>
</div>
<div id="sub">
<p> ~內文省略~ </p>
</div>
</div>

<div id="footer">
<p> ~內文省略~ </p>
</div>

arrow
arrow
    全站熱搜

    Fong Mong Fe 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄