如何通过 CSS 实现一个左边固定宽度,右边自适应的两列布局

如题所述

通过绝对定位实现
See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen.
注意点如下:
需要套一个“positioned”的父元素 div-a 绝对定位,并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-a 的宽度(因为 div-a 绝对定位已经脱离文档流,故不设定为 div-a 宽度的话,会相互覆盖) div-c 绝对定位并将位置调整为正下方 需要自适应的 div 均设定宽度为100%
温馨提示:内容为网友见解,仅供参考
无其他回答

如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局
需要套一个“positioned”的父元素 div-a 绝对定位,并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-a 的宽度(因为 div-a 绝对定位已经脱离文档流,故不设定为 div-a 宽度的话,会相互覆盖) div-c 绝对定位并将位置调整为正下方 需要自适应的 div 均设定宽度为100 2. 通过浮...

css怎么设置左边固定右边自适应
1.浮动 将左边固定区域设置浮动,右边margin设置为左边固定p的宽度。2.绝对定位(absolute)将左边固定区域设置相对定位,右边margin设置为左边固定p的宽度。3.flex弹性布局 4.grid 网格布局 5.左边浮动,让right单独成为一个BFC,BFC的区域不会与float box重叠。

css能不能实现左边div固定宽度,右边div自适应撑满剩下的宽度
2列布局,左侧定宽,右侧宽度为100%,就能自适应。<!DOCTYPE html> 两列布局 .container { width: 80%; height: 600px; border: 10px solid lightslategray; margin: 0 auto; } .left,.right { \/* 将块级元素呈现水平方向的排列效果 *\/ float: lef...

css布局的几种方式?
原生css布局的方式,float布局,也是最基础的方式。将aside向左浮动,固定好宽度。main向右浮动,注意固定好宽度是100vw-左侧边栏的宽度,注意高度是100vh-上下header和footer高度之和。两列布局分为两种。一种是左侧定宽、右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间。...

css实现三栏布局?
因此,使用box不适合。建议:使用3个长度100%的主div进行布局;使用CSS定位控制(position属性)固定上下两个div。主要实践案例:左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局响应式布局(媒体查询)——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。

容器左右布局方法
一个容器左右布局,左边固定宽度,右边自适应宽度 1.利用css3的cacl(算术表达式) 属性来设置宽度 cacl 运算符左右两边必须要有空格 2.使用margin负值,右边和左边在同一行,再给右边容器一个子容器,设置margin-left为左边容器宽度 (使用margin负值,浏览器认为这个元素的大小变小了,所以会改变布局,...

如何用CSS+DIV写两个并列并且左边宽高固定,右边宽高自适应屏幕的层?
test a --- html和body的高度设置为100%, 这样才能让div#wrap的高度生效.若要将左侧高度固定,将.fixed的height设置为固定值就行了.

css网页的几种布局实例
1、左边固定,右边自适应布局的两种实现方式效果图如下:大屏展示:小屏展示: 第一种实现方式通过负边距与浮动 实现左边固定,右边自适应的布局。 主要代码如下: .left{ float: left; width: 100%; height: 200px; background-color: red; } .left-content{ margin-left: 30%; } .right{ float: left; widt...

左边的DIV设定了固定的宽度,右边的DIV如何自适应地填满剩下的屏幕宽度...
}box1box2可以简单参考一下,上面用了flex布局。(我也是最近才学的)至于用浮动来实现,一时半会我还真想不起要怎么实现了,再想想看...

CSS布局 , 单列宽度固定,另一列自适应。
实际宽度虽然不对,但是效果上是对的,一般都是这样解决的。如果要求实际宽度对的话要用js了(一般不会有这样的要求吧,这样用不好)。<!DOCTYPE html> test *{padding:0;margin:0;} test text!div float <

相似回答