css左邊固定,右邊自適應

2021-07-27 17:49:02 字數 943 閱讀 1453

lang="en">

charset="utf-8">

title>

head>

class="container">

class="left">

div>

class="right">

div>

div>

body>

html>

方法1:

左邊div使用float:left;

.left

.right

style>

方法2:將外部容器div設定display:flex,flex-direction: row,將專案水平顯示,正如乙個行一樣。並且將右邊div設定flex:1,自適應寬度

.container

.left

.right

style>

方法3:首先設定左邊容器的寬度,和float值,然後設定右邊容器的margin-left為左邊容器的寬度

.container

.left

.right

style>

方法4:讓左邊容器脫離文件流,設定右邊容器的margin-left為左邊容器的寬度

.container

.left

.right

style>

方法5:將外部容器的display設定為table型,左右兩邊容器設定為table-cell型,但是這樣的話會使左邊和右邊容器同高。

.container

.left

.right

style>

css 布局小技巧 左邊固定右邊自適應

在頁面布局或者是列表布局中,我們經常出現乙個場景 左邊是固定寬度的盒子,右邊自適應 divclass product open labelclass label open product label 這一列是固定寬度 ulclass check game 這一列自適應 li label inputt...

7種css左邊固定,右邊自適應及優缺點

公共樣式 我是左側,固定寬度為100px 我是右側,寬度自適應,多多指教 float margin left方案 left float right margin container float 父元素清除浮動 缺點 需要清除浮動 需要計算右側盒子的margin left兩個子元素浮動 float 子...

兩欄布局,左邊固定寬度,右邊自適應

no.1 使用浮動 float left right use float left use float right 實現效果 no.2 使用浮動 flex left right use flex use flex flex left use flex flex right 實現效果 no.3 使用浮...