左右布局 左邊定寬 右邊自適應

2021-08-02 14:42:29 字數 781 閱讀 4674

**:

要求:不少於三種方法

所有方案:父元素的寬度為單位為%

absolute + padding

left

right

小結:父元素設定padding-left是給左邊元素預留空間,左邊元素絕對定位到該位置。

flex,未來趨勢,推薦!

left

right

小結:flow屬性為flow-grow,flow-shrink,flow-basis屬性縮寫。

table

left

right

小結:如果**元素未設定寬度,則寬度為**除了其他元素外,剩餘空間。

float 解決方案

left

right

小結:(1)元素如果不設定寬度,則預設繼承父元素寬度 (2)overflow:hidden; 清除左邊元素浮動 (3)右邊元素未設定寬度,則寬度=父元素寬度-左邊元素寬度;

bfc原理:因為bfc

內部的元素和外部的元素絕對不會互相影響,因此, 當bfc

外部存在浮動時,它不應該影響bfc

內部box的布局,bfc

會通過變窄,而不與浮動有重疊。

使用 float+calc屬性

left

right

CSS布局樣式 左右布局,左邊定寬,右邊自適應

1.display table width 100 和 diplay table cell tabletitle head wrap sidebar content style id wrap class sidebar sidebardiv class content contentdiv div...

實現左邊定寬右邊自適應效果

現在有乙個容器,其中放有兩個div,html和css 如下所示。我們需要這兩個div併排在一行,並使左邊的div寬度確定,右邊的div寬度能夠自適應剩餘的容器寬度。請寫出你能想到的所有可能。v class cont class left item class right item html,body...

兩列布局,左邊定寬100px,右邊自適應?

1 使用flex布局,父容器設定display flex,左邊div設定flex 0 0 100px width 100px height 100px 右邊div設定 flex 1 height 100px doctype html utf 8 title container d1.d2 style...