css常見的各種布局下----三列布局

Joonas 發(fā)布于2019-04-22 16:12 / 1242人閱讀

摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現(xiàn)左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數(shù)，使其左右靠齊中間自適應部分嵌套一

css 三列布局，左右固定寬度右邊自適應

1不使用定位，只使用浮動可以實現(xiàn)左右固定，中間寬度自適應布局

1.1.1 自適應部分一定要放第一個位子，使用浮動，并且設置寬度為100%，不設置浮動元素內容不夠稱不開整個寬度

1.1.2 左右固定部位，使用margin-left :負數(shù)，使其左右靠齊

1.1.3 中間自適應部分嵌套一個div，設置margin-left 和 margin-right 使其空出左右固定的寬度

 !DOCTYPE HTML 
 html lang="en-US" 
 head 
 meta charset="UTF-8" 
 title 三列布局 /title 
 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 .box .box-content {
 height: 100%;
 float: left; /* 一定要設置浮動，要不下面的模塊上不來 */
 width:100%;/* 一定要設置100%，要不內容不夠稱不開整個頁面 */
 background-color: blue; 
 /* 默認還是整行 */
 .box .box-content .child {
 margin: 0 210px;
 /* 中間模塊空出左右距離，設置浮動 */
 background: red;
 height: 100%;
 .box .box-left { 
 width: 200px; float: left; 
 margin-left: -100%; /* 設置浮動， margin-left:-100% 可以使元素往上移一行，并且移動到最左邊 */ 
 height: 300px; 
 background-color: green; 
 .box .box-right { 
 float: left; 
 width: 200px; 
 min-height: 100%; 
 margin-left: -200px;/* 設置浮動， margin-left:負的自身寬度 可以使元素往上移一行，并且移動到最右邊 */ 
 background-color: pink; 
 header,footer { height: 75px; background-color: aqua; } 
 /style 
 /head 
 body 
 header /header 
 div 
 div 
 div 
 中間主題內容
 /div 
 /div 
 div 
 11dsdasdas不你弟弟呢多帶帶
 /div 
 div 
 12酷酷酷酷酷的的是計算機技術升級的歷史記錄
 /div 
 /div 
 footer 
 /footer 
 /body 
 /html

1.2 其實只是簡單的中間內容自適應，還可以設置，中間的元素塊狀元素盒子模型為ie下的盒子模型，

再使用padding也是可以實現(xiàn)的

 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 .box .box-content {
 box-sizing:border-box;
 height: 100%;
 float: left; /* 一定要設置浮動，要不下面的模塊上不來 */
 width:100%;/* 一定要設置100%，要不內容不夠稱不開整個頁面 */
 /* 默認還是整行 */
 padding:0 210px;
 .box .box-content .child {
 /* 中間模塊空出左右距離，設置浮動 */
 background-color: blue; 
 height: 100%;
 .box .box-left { 
 width: 200px; float: left; 
 margin-left: -100%; /* 設置浮動， margin-left:-100% 可以使元素往上移一行，并且移動到最左邊 */ 
 height: 300px; 
 background-color: green; 
 .box .box-right { 
 float: left; 
 width: 200px; 
 min-height: 100%; 
 margin-left: -200px;/* 設置浮動， margin-left:負的自身寬度 可以使元素往上移一行，并且移動到最右邊 */ 
 background-color: pink; 
 header,footer { height: 75px; background-color: aqua; } 
 /style 
 body 
 header /header 
 div 
 div 
 div !-- 這個div只是為了方便看，設置了以下背景色 可用可不用，內容區(qū)還是自適應的 -- 
 中間主題內容
 /div 
 /div 
 div 
 11dsdasdas不你弟弟呢多帶帶
 /div 
 div 
 12酷酷酷酷酷的的是計算機技術升級的歷史記錄
 /div 
 /div 
 footer 
 /footer 
 /body

2，上面其實是圣杯布局，我們再使用中間相對定位，左右兩邊絕對定位（中間絕對定位，不設置寬度撐不開容器）

其實只要中間的位子對應了，左右兩邊不管是相對定位，還是絕對定位都可以

重點當然還是中間怎么取定位（元素順序沒有關系）

如果中間取相對定位，不設置浮動，設置margin 空出左右距離，

兩邊取絕對定位，只要設置top:0 一個left:0? 一個right:0

 !DOCTYPE HTML 
 html lang="en-US" 
 head 
 meta charset="UTF-8" 
 title 三列布局 /title 
 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 overflow: hidden;
 .box .box-content {
 position: relative;
 height: 100%;
 margin-left: 210px;
 margin-right: 210px;
 background-color: blue;
 .box .box-left { 
 width: 200px; 
 position: absolute; 
 height: 300px; 
 left: 0;
 top:0;
 background-color: green; 
 .box .box-right { 
 width: 200px; 
 position: absolute; 
 min-height: 100%; 
 right: 0px;
 top:0;
 background-color: pink; 
 header,footer { height: 75px; background-color: aqua; } 
 /style 
 /head 
 body 
 header /header 
 div 
 div 
 div 
 中間主題內容asdasdasdsadsasda嘎達可根但是薩嘎薩嘎?lián)⒗锞蛪蛄思按砩探夥怕?br>絲釘結案率放假啊了解
 /div 
 /div 
 div 
 11dsdasdas不你弟弟呢多帶帶
 /div 
 div 
 12酷酷酷酷酷的的是計算機技術升級的歷史記錄
 /div 
 /div 
 footer 
 /footer 
 /body 
 /html

3.我們再看下使用定位的雙飛燕布局，雙飛燕，要對父容器設置padding ,大小等一左右固定寬度

? 左右兩邊據(jù)對定位，就這個和上面的方法差不多，我們一起看看左右兩邊相對定位

如果左右兩邊相對定位，設置margin和和left

 !DOCTYPE HTML 
 html lang="en-US" 
 head 
 meta charset="UTF-8" 
 title 三列布局 /title 
 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 overflow: hidden;
 padding: 0 210px;
 .box .box-content {
 height: 100%;
 float: left;
 background-color: blue;
 .box .box-left { 
 width: 200px; 
 position: relative; 
 height: 300px; 
 float: left;
 left: -210px;
 margin-left: -100%;
 background-color: green; 
 .box .box-right { 
 width: 200px; 
 position: relative; 
 min-height: 100%; 
 float: left;
 margin-left: -200px;
 right: -210px;
 background-color: pink; 
 header,footer { height: 75px; background-color: aqua; } 
 /style 
 /head 
 body 
 header /header 
 div 
 div 
 夠了及代理商解放螺絲釘結案率放假啊了解多嘎多gags廣東省水水水水水水水水水水
水水頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂
 /div 
 div 
 11dsdasdas不你弟弟呢多帶帶
 /div 
 div 
 12酷酷酷酷酷的的是計算機技術升級的歷史記錄
 /div 
 /div 
 footer 
 /footer 
 /body 
 /html

? 4.是用flex實現(xiàn)三列布局，左右固定中間自適應，父元素設置display: flex, 左右分別設置flex: 0 0 200px ，父元素為display:flex

那么子元素的float、clear和vertical-align屬性將失效，兼容性有問題，一般都用于移動端

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 三列布局 /title 
 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 display: flex;
 .box .box-content {
 flex: 0 1 auto;
 margin: 0 10px;
 background-color: blue;
 .box .box-left {
 flex: 0 0 200px;
 background-color: green;
 .box .box-right {
 flex: 0 0 200px;
 background-color: pink;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 /head 
 body 
 header 
 /header 
 div 
 div 
 11dsdasdas不你弟弟呢多帶帶
 /div 
 div 
 解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲
 幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)
 過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 div 
 12酷酷酷酷酷的的是計算機技術升級的歷史記錄
 /div 
 /div 
 footer 
 /footer 
 /body 
 /html

5. 使用grid 布局實現(xiàn)三列布局，也是特別簡單，設置父元素為，單行，三列，第一列左邊寬度，中間自適應，

右邊自適應，當然grid兼容性很大問題

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 三列布局 /title 
 style 
 .box{
 height: 500px;
 background-color: bisque;
 position: relative;
 display: grid;
 grid-gap: 10px;
 grid-template-columns: 200px auto 200px;
 grid-template-rows: 1fr;
 .box .box-content {
 background-color: blue;
 .box .box-left {
 flex: 0 0 200px;
 background-color: green;
 .box .box-right {
 flex: 0 0 200px;
 background-color: pink;
 header,footer {
 height: 75px;
 background-color: aqua;
 /style 
 /head 
 body 
 header 
 /header 
 div 
 div 
 11dsdasdas不你弟弟呢多帶帶
 /div 
 div 
 解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾
 /div 
 div 
 12酷酷酷酷酷的的是計算機技術升級的歷史記錄
 /div 
 /div 
 footer 
 /footer 
 /body 
 /html

View Code

三列布局總結

1.不使用浮動的圣杯布局，左中右都設置浮動，中間設置寬度100%，嵌套一層div 使其自元素的內容區(qū)

恰好自適應大小，左邊右邊設置margin-left:-100% 和margin:-右邊寬度，

如果不想使用中間嵌套div,則可以設置中間的盒子模型為ie下的盒子模型，然后設置padding的值

中間模塊一定要放最前面

2. 使用定位，中間設置margin-left 左邊寬度，右邊設置margin-right 右邊寬度，父元素設置定位

position:relative; 左右兩邊設置position:absolute，絕對定位，設置 top 0 left 0 ,top 0 right 0

3. 使用定位，中間一樣，左右兩邊設置相對定位，則要設置父元素padding 或者margin 左右寬度

然后和1一樣設置，左邊右邊設置margin-left:-100% 和margin:-右邊寬度，左邊再加上left:-寬度

右邊設置right:-右邊寬度，這個就是經(jīng)典的雙飛翼布局

4.使用彈性盒子布局，記住中間的一定要設置flex: 0 1 auto ，縮小倍數(shù)一定要是1，不是1的話盒子會

被子元素字體撐開，一般使用于移動端

5.使用grid,目前應該有很大兼容性問題，了解就行

云服務器 GPU云服務器 extjs三列式布局 java中各種布局 css布局 css布局教程

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/783.html

css常見的各種布局下----三列布局

css 三列布局，左右固定寬度右邊自適應　　1不使用定位，只使用浮動可以實現(xiàn)左右固定，中間寬度自適應布局　　　　　1.1.1 自適應部分一定要放第一個位子，使用浮動，并且設置寬度為100%，不設置浮動元素內容不夠稱不開整個寬度　　　　　1.1.2 左右固定部位，使用margin-left :負數(shù)，使其左右靠齊　　　　　1.1.3 中間自適應部分嵌套一個div，設置m...

番茄西紅柿 2019-04-23 10:21 評論0 收藏0
css常見的各種布局下----三列布局

摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現(xiàn)左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數(shù)，使其左右靠齊中間自適應部分嵌套一css 三列布局，左右固定寬度右邊自適應 1不使用定位，只使用浮動可以實現(xiàn)左右固定，中間寬度自適應布局 1.1.1 自適應部分一定要放第一個位子，使...

tigerZH 2019-04-22 17:02 評論0 收藏0
css常見的各種布局下----三列布局

摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現(xiàn)左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數(shù)，使其左右靠齊中間自適應部分嵌套一css 三列布局，左右固定寬度右邊自適應 1不使用定位，只使用浮動可以實現(xiàn)左右固定，中間寬度自適應布局 1.1.1 自適應部分一定要放第一個位子，使...

mingde 2019-04-22 16:34 評論0 收藏0
前端面試之CSS總結(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 評論0 收藏0
CSS

摘要：在元素之后添加內容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進行定位。雙冒號是在當前規(guī)范中引入的，用于區(qū)分偽類和偽元素。 1.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？有兩種，?IE 盒子模型、W3C 盒子模型；盒模型：?內容(content)、填充(padding)、邊界(margin)、?邊框(border)；區(qū)? 別：?IE的cont...

Lyux 2019-08-29 16:16 評論0 收藏0