三欄布局 左右固定,中間自適應

2021-08-13 22:28:44 字數 758 閱讀 6004

這是我綜合的幾種方法,親自實踐過了。第五種是三個都是自適應。

charset="utf-8" />

三欄布局title>

type="text/css">

* /*第一種方法:bfc*/

.left

.right

.main

/*第二種方法:雙飛翼布局*/

/*.container

.main

.left

.right

*//*第三種方法:聖杯布局*/

/*.container

.main

.left

.right */

/*第四種:flex布局*/

/*.container

.left

.right

.main*/

/*第五種:table*/

/*.container

.left

.right

.main*/

style>

head>

class="left">我是左邊div>

class="right">我是右邊div>

class="main">我是中間div>

body>

html>

頁面效果:

三欄布局 左右固定,中間自適應

之前有寫過關於固定父布局,然後父布局內有是兩列自適應。現在我們來看看三欄布局,當左右固定,中間的布適應是如何實現的。這裡將介紹兩種方法,一種是使用margin值,另一種是使用position絕對定位。首先我們來看第一種方法,下面是實現的 無標題文件left right 1.請補充右側編輯器的任務1,...

左右固定中間自適應布局

1.這是三欄布局中間部分 2.這是三欄布局中間部分 1.這是三欄布局中間部分 2.這是三欄布局中間部分 其實稍微想一下就能想到這個flex布局,article的display設定為flex,左右div寬度固定,中間div的flex屬性設定為1,讓其自動填充剩下的空間 1.這是三欄布局中間部分 2.這...

css三欄布局之左右寬度固定中間自適應

1.利用浮動解決三欄布局問題 1.左右三欄布局,浮動解決方法 2.左右三欄布局,浮動解決方法 2.利用絕對定位解決 1.左右三欄布局,定位解決方法 2.左右三欄布局,定位解決方法 3.利用flexbox解決 1.左右三欄布局,flexbox解決方法 2.左右三欄布局,flexbox解決方法 4.利用...