css左固定右自适应常用方法
程序员文章站
2022-12-23 23:11:59
下面是几种方法的公用部分(右自适应也是一样的,换一下方向) html: css: 1. 左脱离文档流,右margin 1.1 左float 1.2 左absolute 2. flex布局(左定宽,右flex设置为1,自动伸展,此处注意flex兼容性,可以通postcss等后处理器自动加上前缀) 效果 ......
下面是几种方法的公用部分(右自适应也是一样的,换一下方向)
html:
<div class="demo"> <div class="sidebar">我是固定的</div> <div class="content">我是自适应的</div> </div>
css:
.sidebar,.content{ height: 300px; } .sidebar{ background-color: red;
width: 300px; } .content{ background-color: green; }
1. 左脱离文档流,右margin
1.1 左float
.demo .sidebar{ float: left; } .demo .content{ margin-left: 310px; }
1.2 左absolute
.sidebar{ position: absolute; top: 0; left: 0; } .content{ margin-left: 310px; }
2. flex布局(左定宽,右flex设置为1,自动伸展,此处注意flex兼容性,可以通postcss等后处理器自动加上前缀)
.demo{ display: flex; } .sidebar{ width: 300px;
margin-right:10px; } .content{ flex: 1; }
效果图如下:
推荐阅读
-
css左固定右自适应常用方法
-
CSS网页布局入门教程6:左列固定,右列宽度自适应
-
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
-
css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动
-
css实现左(右)侧固定宽度,右(左)侧宽度自适应 ---清除浮动
-
css实现两边固定中间自适应布局的四种常用方法
-
DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条._html/css_WEB-ITnose
-
一个页面分为左中右3部分,中间部分像素固定为1000px, 中间部分要居中, 剩下左右2部分的宽度如何设置?_html/css_WEB-ITnose
-
CSS布局??左定宽度右自适应宽度并且等高布局_html/css_WEB-ITnose
-
css左固定右自适应常用方法