CSS實現兩欄布局


寫在前面

兩欄布局是指頁面布局由主欄和邊欄組成,是許多網頁的布局方式,一般使用CSS去實現兩欄布局。

實現兩欄布局的方式有多種,這里采用四種比較常見的實現方式。主要是流體布局(liquid layouts),凝膠布局(Jello layouts),絕對布局(absolute layouts),表格布局(table layouts)。

所有源碼在底部。

流體布局

瀏覽器顯示HTML元素,是從HTML文件最上面開始,從上往下沿元素流顯示各個元素,像一個流體一樣。

頁面布局如下:

    <header>頁眉.................</header>
<div id="section">
內容開始
<p>段落1...................................</p>
<p>段落2...................................</p>
<p>段落3...................................</p>
<p>超長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長段落</p>
內容結束
</div>
<div id="aside">
<p>段落1...................................</p>
<p>段落1...................................</p>
<p>段落2...................................</p>
<p>段落3...................................</p>
<p>長長長長長長長長長長長長長長長長長長長長長長長長長長長段落</p>
</div>
<footer>
頁腳
</footer>

效果如下:

為了實現兩欄布局,就要讓頁面左欄浮動起來

    div#section
{
float: left; // 讓頁面左欄浮動起來
}

如果光讓左欄浮動起來,瀏覽寬度足夠的時候顯示會正常,寬度不夠時,則會遮擋住頁腳

這時候就要清除浮動,就能讓頁腳不被遮擋

    footer
{
clear: left; // 清除浮動,clear的值有 left/right/both,分別是清除左/右/兩邊的浮動
}

凍結布局

流體布局當用戶拉長或者縮小瀏覽器時,頁面的內容會隨之換行,很多時候這並是不我們想要看到的效果,這時候就要把頁面凍結住,使用凍結布局。

凍結布局就是在流體布局的最外層,加一層div,並且指定寬度。

    <div id="allcontent"> // 實現凍結布局
<header>頁眉.................</header>
<div id="section">
內容開始
<p>段落1...................................</p>
<p>段落2...................................</p>
<p>段落3...................................</p>
<p>超長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長段落</p>
內容結束
</div>
<div id="aside">
<p>段落1...................................</p>
<p>段落1...................................</p>
<p>段落2...................................</p>
<p>段落3...................................</p>
<p>長長長長長長長長長長長長長長長長長長長長長長長長長長長段落</p>
</div>
<footer>
頁腳
</footer>
</div>
    div#allcontent
{
width: 1200px; // 指定寬度為1200px
}

凝膠布局

當我們使用凍結布局,頁面就會停靠在左邊,為了使頁面居中,就要使用凝膠布局。

凝膠布局就是將頁面最外層的div的左外邊距和右外邊距設置為auto。凝膠布局無論瀏覽器大小如何變化,頁面始終會居中。

    div#allcontent
{
width: 1200px;
margin-left: auto;
margin-right: auto;
}

絕對布局

絕對布局就是使用position:absolute對元素進行布局。

position有四個屬性,默認就是static,就是不會被定位。absolute使用最近的父元素進行定位。fixed使用視窗進行定位,也就是使用瀏覽器進行定位。relative使用元素本身在正常位置進行定位。

兩欄布局可以使用絕對定位,指定一定的像素,來實現絕對布局,

    div#aside
{
position: absolute; // 絕對布局
top: 170px; // 距離父元素頂部邊框170px
right: 0px; // 距離父元素右部邊框0px
width: 300px; // 指定寬度
}

由於絕對定位是將元素從流中刪除,所以更改瀏覽器大小時,也會出現邊框遮擋住頁腳的情況。

表格布局

表格布局就是將頁面用表格的形式進行布局。使用display:table進行實現。

HTML中也有<table>標簽,有的人實現表格布局會使用<table>標簽,但是這是不合理的。HTML是超文本標記語言,各個標簽都有自己對應的語義,目的是為了結構清晰,所以不應該使用HTML來進行表格布局,而應該使用CSS進行布局的操作。

    <header>頁眉.................</header>
<div id="tableContainer">
<div id="tableRow">
<div id="section">
內容開始
<p>段落1...................................</p>
<p>段落2...................................</p>
<p>段落3...................................</p>
<p>超長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長長段落</p>
內容結束
</div>
<div id="aside">
<p>段落1...................................</p>
<p>段落1...................................</p>
<p>段落2...................................</p>
<p>段落3...................................</p>
<p>長長長長長長長長長長長長長長長長長長長長長長長長長長長段落</p>
</div>
</div>
</div>
<footer>
頁腳
</footer>

表格布局需要在最外層的div中使用display:table

    div#tableContainer
{
display: table; // 最外層div設置為表格
border-spacing: 10px; // 表格布局沒有外邊距,border-spacing就是等同於margin
}
div#tableRow
{
display: table-row; // 設置一行,也可以設置多行
}
div#section
{
display: table-cell; // 將div設置為表格中的單元格
background-color: rgb(93, 173, 226);
}
div#aside
{
display: table-cell; // 將div設置為表格中的單元格
background-color: rgb(133, 146, 158);
}

寫在最后

 實現布局的方式可以有許多種,使用哪一種具體看業務需求,但是兩欄布局比較適合使用表格布局,而且,日常使用中,一般不會單獨使用一種布局,多種布局同時使用才是常態,才能實現最好的效果。

完整源碼鏈接:https://github.com/yijidao/layouts

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: