如何一邊寬度自適應 一邊寬度固定

2021-08-17 01:18:37 字數 830 閱讀 3024

一:

右側固定寬度 左側自適應

第一種:左側用margin-right,右側float:right  就可以實現。

html**可以如下寫:

我是龍恩

我是龍恩

css**可以如下寫:

.box-left

.box-right

如上**就可以實現效果。

第二種:左側同樣用margin-right  右側採用絕對定位 如下**所示:

html**如下:

我是龍恩

我是龍恩

css**如下:

.bd.bd-left

.bd-right

第三種:右側浮動 且 用負margin值

html**如下:

我是龍恩

我是龍恩

css**如下:

.wrap

.wrap-right

.wrap-left

.left-con

.left-con,.wrap-right

二:左右固定 中間自適應的情況

第一種:左右側採用浮動 中間採用margin-left 和 margin-right 方法。

這是右側的內容 固定寬度

這是左側的內容 固定寬度

中間內容,自適應寬度

第二種:左右兩側採用絕對定位 中間同樣採用margin-left margin-right方法:

html**如下:

css**如下:

.l-sidebar

.mainbar

.r-sidebar

頁面布局之一邊固定一邊自適應

專案開發過程中我們常用的布局一邊固定一邊自適應。常見的是左邊固定,右邊自適應。1.浮動 2.定位 這種布局方式有一定的缺陷,當內容的高度大於父元素時,會影響下面的布局,出現下面的情況。這種方式不建議在不知道內容高度的情況下使用.flex 是css3的特性,有相容性.4.calc calc 不是所有的...

一邊學習,一邊記錄

1 flutter channels 檢視flutter分支 帶星 表示當前的分支 2 flutter doctor 檢視flutter環境配置完成情況 3 flutter devices 執行時需要的裝置 4 flutter upgrade 更新flutter 5 flutter packages...

一邊泡茶一邊搬磚

有很多剛開始喝茶,還不太懂茶的茶友經常會有這樣的疑惑 喝茶,到底哪一泡才是最好喝的呢?對於每泡茶的口感,一直流傳著這麼一段話 一道水,二道茶,三道四道是精華,五道六道也不差,七泡有余香,八道有餘味,九道十道仍回味。這麼說來,第 三 四道才是茶最精華的口感。事實上也確實是這樣,茶葉剛泡的時候味道還沒出...