左-下
右-上
右-下
資訊專欄INFORMATION COLUMN
摘要：寬度自適應(yīng)兩列布局兩列布局可以使用浮動(dòng)來完成，左列設(shè)置左浮動(dòng)，右列設(shè)置右浮動(dòng)，這樣就省的再設(shè)置外邊距了。橫向兩列布局頁頭導(dǎo)航左上右上左下右上右下頁腳
1、寬度自適應(yīng)兩列布局
兩列布局可以使用浮動(dòng)來完成，左列設(shè)置左浮動(dòng)，右列設(shè)置右浮動(dòng)，這樣就省的再設(shè)置外邊距了。
當(dāng)元素使用了浮動(dòng)之后，會(huì)對(duì)周圍的元素造成影響，那么就需要清除浮動(dòng)，通常使用兩種方法。可以給受到影響的元素設(shè)置 clear:both，即清除元素兩側(cè)的浮動(dòng)，也可以設(shè)置具體清除哪一側(cè)的浮動(dòng)：clear:left 或 clear:right，但必須清楚的知道到底是哪一側(cè)需要清除浮動(dòng)的影響。也可以給浮動(dòng)的父容器設(shè)置寬度，或者為 100%，同時(shí)設(shè)置 overflow:hidden，溢出隱藏也可以達(dá)到清除浮動(dòng)的效果。
同理，兩列寬度自適應(yīng)，只需要將寬度按照百分比來設(shè)置，這樣當(dāng)瀏覽器窗口調(diào)整時(shí)，內(nèi)容會(huì)根據(jù)窗口的大小，按照百分比來自動(dòng)調(diào)節(jié)內(nèi)容的大小。
寬度自適應(yīng)兩列布局
頁頭
左列
右列
2、固定寬度兩列布局
寬度自適應(yīng)兩列布局在網(wǎng)站中一般很少使用，最常使用的是固定寬度的兩列布局。
要實(shí)現(xiàn)固定寬度的兩列布局，也很簡(jiǎn)單，只需要把左右兩列包裹起來，也就是給他們?cè)黾右粋€(gè)父容器，然后固定父容器的寬度，父容器的寬度固定了，那么這兩列就可以設(shè)置具體的像素寬度了，這樣就實(shí)現(xiàn)了固定寬度的兩列布局。
固定寬度兩列布局
頁頭
左列
右列
3、兩列居中自適應(yīng)布局
同理，只需要給定父容器的寬度，然后讓父容器水平居中。
兩列居中自適應(yīng)布局
頁頭
左列
右列
4、固定寬度橫向兩列布局
和單列布局相同，可以把所有塊包含在一個(gè)容器中，這樣做方便設(shè)置，但增加了無意義的代碼，固定寬度就是給定父容器的寬度，然后中間主體使用浮動(dòng)。
橫向兩列布局
頁頭
左-上
右-上
左-下
右-上
右-下
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/50613.html
摘要：清單一些說明注意文檔的書寫順序，先寫兩側(cè)欄，再寫主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到?？梢酝ㄟ^設(shè)置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...
摘要：寬度自適應(yīng)兩列布局兩列布局可以使用浮動(dòng)來完成，左列設(shè)置左浮動(dòng)，右列設(shè)置右浮動(dòng)，這樣就省的再設(shè)置外邊距了。橫向兩列布局頁頭導(dǎo)航左上右上左下右上右下頁腳 1、寬度自適應(yīng)兩列布局 兩列布局可以使用浮動(dòng)來完成，左列設(shè)置左浮動(dòng)，右列設(shè)置右浮動(dòng)，這樣就省的再設(shè)置外邊距了。 當(dāng)元素使用了浮動(dòng)之后，會(huì)對(duì)周圍的元素造成影響，那么就需要清除浮動(dòng)，通常使用兩種方法?？梢越o受到影響的元素設(shè)置 clear...
摘要：中脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時(shí)候，會(huì)當(dāng)做脫離文檔流的元素不存在而進(jìn)行定位。而對(duì)于使用脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會(huì)無視它。 第一章 內(nèi)容簡(jiǎn)介 1-1 內(nèi)容簡(jiǎn)介 showImg(https://segmentfault.com/img/bVsT8U); 網(wǎng)頁可以自適應(yīng)寬度網(wǎng)頁的長(zhǎng)度理論上可以無限延長(zhǎng) 頁面為： 頭部 主體部分 底部...
摘要：題目雖然是說的寬度，但其實(shí)最讓人抓狂的是單元格的寬度。表格的寬度有決定，列的寬度有首行單元格的決定。如果單元格的值為，則最小單元格寬度為為最小內(nèi)容寬度。最大列寬必須等于這個(gè)單元格的最大單元格寬度。 題目雖然是說table的寬度，但其實(shí)最讓人抓狂的是單元格td的寬度。平時(shí)開發(fā)中也經(jīng)常會(huì)遇到這方面的問題，所以我找資料學(xué)習(xí)table的寬度的算法。 table-layout table-lay...
閱讀 2982·2021-11-24 09:39
閱讀 1266·2021-11-02 14:38
閱讀 4313·2021-09-10 11:26
閱讀 2852·2021-08-25 09:40
閱讀 2386·2019-08-30 15:54
閱讀 559·2019-08-30 10:56
閱讀 2864·2019-08-26 12:14
閱讀 3299·2019-08-26 12:13
