二列布局

MobService 發布于2019-08-29 12:19 / 1576人閱讀

摘要：寬度自適應兩列布局兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。橫向兩列布局頁頭導航左上右上左下右上右下頁腳

1、寬度自適應兩列布局
　　兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。

　　當元素使用了浮動之后，會對周圍的元素造成影響，那么就需要清除浮動，通常使用兩種方法。可以給受到影響的元素設置 clear:both，即清除元素兩側的浮動，也可以設置具體清除哪一側的浮動：clear:left 或 clear:right，但必須清楚的知道到底是哪一側需要清除浮動的影響。也可以給浮動的父容器設置寬度，或者為 100%，同時設置 overflow:hidden，溢出隱藏也可以達到清除浮動的效果。

　　同理，兩列寬度自適應，只需要將寬度按照百分比來設置，這樣當瀏覽器窗口調整時，內容會根據窗口的大小，按照百分比來自動調節內容的大小。




    
    寬度自適應兩列布局



頁頭
左列
右列
頁腳

2、固定寬度兩列布局
　　寬度自適應兩列布局在網站中一般很少使用，最常使用的是固定寬度的兩列布局。

　　要實現固定寬度的兩列布局，也很簡單，只需要把左右兩列包裹起來，也就是給他們增加一個父容器，然后固定父容器的寬度，父容器的寬度固定了，那么這兩列就可以設置具體的像素寬度了，這樣就實現了固定寬度的兩列布局。




    
    固定寬度兩列布局



頁頭

    左列
    右列

頁腳

3、兩列居中自適應布局
　　同理，只需要給定父容器的寬度，然后讓父容器水平居中。




    
    兩列居中自適應布局



頁頭

    左列
    右列

頁腳

4、固定寬度橫向兩列布局
　　和單列布局相同，可以把所有塊包含在一個容器中，這樣做方便設置，但增加了無意義的代碼，固定寬度就是給定父容器的寬度，然后中間主體使用浮動。




    
    橫向兩列布局




    頁頭
    導航
    
        左-上
        右-上
    
    
        左-下
        右-上
        右-下
    
    頁腳

GPU云服務器云服務器 linux第二列相加 div布局布局html 排版布局拖動布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111819.html

CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0
二列布局

摘要：寬度自適應兩列布局兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。橫向兩列布局頁頭導航左上右上左下右上右下頁腳 1、寬度自適應兩列布局　　兩列布局可以使用浮動來完成，左列設置左浮動，右列設置右浮動，這樣就省的再設置外邊距了。　　當元素使用了浮動之后，會對周圍的元素造成影響，那么就需要清除浮動，通常使用兩種方法。可以給受到影響的元素設置 clear...

stormgens 2019-08-01 16:35 評論0 收藏0
如何用CSS進行網頁布局-imooc-【更新完畢】

摘要：中脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。而對于使用脫離文檔流的元素，其他盒子與其他盒子內的文本都會無視它。第一章內容簡介 1-1 內容簡介 showImg(https://segmentfault.com/img/bVsT8U); 網頁可以自適應寬度網頁的長度理論上可以無限延長頁面為：頭部主體部分底部...

姘擱『 2019-08-30 12:46 評論0 收藏0
table寬度

摘要：題目雖然是說的寬度，但其實最讓人抓狂的是單元格的寬度。表格的寬度有決定，列的寬度有首行單元格的決定。如果單元格的值為，則最小單元格寬度為為最小內容寬度。最大列寬必須等于這個單元格的最大單元格寬度。題目雖然是說table的寬度，但其實最讓人抓狂的是單元格td的寬度。平時開發中也經常會遇到這方面的問題，所以我找資料學習table的寬度的算法。 table-layout table-lay...

GHOST_349178 2019-08-30 13:15 評論0 收藏0