div+css布局的版式_html/css

以下布局資料原作者：Owen Briggs http://www.ynutx.net/blog/user1/rainoxu/archives/2006/2439.html

單行單列 單行單列1：采用float浮在左上角，固定寬度。 單行單列2：固定在左上角，固定寬度，采用的是絕對(absolute)定位。 單行單列3：固定在左上角，不固定寬度，采用百分比(%)定義寬度來自適應(yīng)頁面。 單行單列4(推薦)：固定寬度，采用在body樣式中定義居中屬性(text-align: center;)實現(xiàn)適應(yīng)頁面自動居中。 單行兩列 單行兩列1：兩列都固定寬度。第一列浮在左上角，第二列浮在第一列右邊。 單行兩列2：兩列都百分比寬度，但不滿屏。第一列固定在左上角，第二列浮在第一列右邊。 單行兩列3：兩列都百分比寬度，滿屏。兩列都采用絕對定位。 單行兩列4：兩列都百分比寬度，滿屏。第一列浮在左上角，第二列浮在右上角。 單行兩列5：兩列都百分比寬度，滿屏。第一列浮在左上角，第二列浮在第一列右邊。 單行三列 單行三列1：左右列都絕對定位(右列定位在右上)。左列和右列固定寬度，中間列自適應(yīng)頁面。 單行三列2：左列定位在左上，右列定位在右上，中間列浮在左列右面。左列和右列固定寬度，中間列自適應(yīng)頁面。 單行三列3：三列都絕對定位。左列和右列固定寬度，中間列根據(jù)內(nèi)容自適應(yīng)。 單行三列4(推薦)：類似樣式2，只是將margin: 20px屬性增加在body樣式中，解決了中間列在Netscape6.0中置頂?shù)膯栴}。 單行三列5：左右列絕對定位，中間列自適應(yīng)。寬度滿屏。 頂行三列 頂行三列1(推薦)：頂行自適應(yīng)頁面寬度。左右列絕對定位，中間列自適應(yīng)頁面。 頂行三列2：寬度滿屏

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com