常见前端布局问题 （一）左侧固定宽度，右侧自适应

最新推荐文章于 2021-01-14 16:31:23 发布
原创 最新推荐文章于 2021-01-14 16:31:23 发布 · 1.9k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js常见布局

本文介绍四种实现网页布局中左侧固定宽度、右侧自适应的方法：使用table和table-cell属性；固定宽度div左浮动结合自适应div的margin-left；定位方式，固定宽度div绝对定位，自适应divmargin-left；以及前两种方法的衍生应用。

1，左边固定宽度，右边自适应

1-1,父元素display：table，子元素display：table-cell，设置固定宽度（常用）

1-2,固定宽度div左浮动，自适应div margin-left等于固定宽度

1-3,定位，固定宽度div绝对定位absolute，自适应margin-left（绝对定位元素脱离正常文档流）

1-4, 方法2的衍生

如何实现一个两栏布局（左侧固定宽度，右侧自适应）？
破损的天堂鸟博客
03-02 1462
现代项目首选：优先使用Flexbox或Grid布局，代码简洁且维护性强。兼容性优先：选择浮动+边距或绝对定位法，适配老旧浏览器。复杂场景扩展：Grid布局适合多列嵌套或响应式断点设计。高度自适应需求：Flexbox天然支持等高，避免手动计算高度。通过以上方法组合，可灵活应对不同项目需求和浏览器兼容性要求。实际开发中建议结合CSS预处理器（如Sass）或PostCSS插件增强代码可维护性。
CSS | CSS实现两栏布局（左边定宽 右边自适应，左右成比自适应）
最新发布
m0_61811926的博客
01-11 750
flex 布局的默认主轴方向为 row ，所以 flex-basis 属性 默认是控制元素的 width。2.利用浮动+margin。一、左边定宽 右边自适应。5.table 布局。
布局-左侧固定宽度，右侧自适应
木习习的博客
07-01 417
一种非常常见的布局需求，简单归纳下多重实现方式。 先来个简单的html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> &...
左边宽度固定，右边自适应
LuckXinXin的博客
05-24 1101
左侧固定宽度，右侧自适应宽度的两列布局实现 html结构 <div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div> </div> 在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度 方法1：左侧div设置成浮动：flo...
左侧固定宽度，右侧自适应宽度的CSS布局
12-12
第一种方法： 关于这个布局，作者是这样说明的：“left和right都贴住左侧。设置left在right上面(z-index)；在right内加个放内容的层(content)；设置content距离right的左侧为200px，即刚巧等于left的宽度。” 这个布局有一个缺点就是，如果我设置了foot的div，试了很多办法，都不能根据content的高度，连着中间的内容，自动置于HTML页面的底部。如有牛人知道解决方法，望留言解答。 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w
左边定宽右边自适应布局方法
just try
03-30 323
在开发业务管理系统时，会遇到左边定宽，右边宽度自适应的问题，比如以下的情况 方法一：左边设置左浮动，右边宽度设置100% .left{ float: left; } .right{ width: 100%; } 方法二： 父容器设...
CSS左侧固定宽 右侧自适应（兼容所有浏览器）
吃瓜群众的博客
10-23 2764
方法一、浮动布局 HTML Left sidebar Main Content CSS Code *{margin: 0;padding: 0;} #left { float: left; width: 220px; background-color: green; } #content { background-color: orange; margin-left: 220px;/*
css实现左侧固定右侧自适应的布局方式
09-22
在前端开发中，实现左侧固定宽度、右侧自适应宽度的布局是一种常见的需求，这样的布局能够适应不同屏幕大小，提高页面布局的灵活性和用户体验。以下将介绍三种使用CSS来实现这种布局的方式。 ### 浮动布局（Float ...
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
在网页设计中，创建左右两栏布局并且支持用户通过拖动改变两栏宽度是一种常见的交互方式，这可以提供更灵活的界面体验。本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是...
左定宽度右自适应宽度并且等高布局实现代码
12-13
在CSS布局中，实现"左定宽度右自适应宽度并且等高布局"是一个常见的需求，尤其是在构建网页布局时。这个需求通常涉及到固定宽度的侧边栏（左侧栏）和自适应宽度的内容区域（右侧栏）。在给定的面试题中，还有等高...
左侧固定，右侧宽度自适应
cindy_rain的博客
11-20 1897
这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。 html部分<div class="box1"> <div class="divA">DIVA</div> <div class="divB">
css实现左侧固定宽度，右侧宽度自适应
fjz9889889的博客
01-14 440
为了适应不同浏览器宽度，类名为kindtext需要自适应宽度。 代码如下 <div class="big-box"> <div class="bigIcon"></div> <div class="kindTitle">大类：</div> <div class="kindText">化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品
实现左侧固定宽度, 右侧自适应的两栏布局的八种方案
技术无止境，人生仍探索。
07-23 5137
HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> &lt
web前端面试-------css实现左侧固定宽度，右侧宽度自适应的五种方式
别告诉我有Bug
09-13 6090
1.浮动布局     左侧设置固定宽并且左浮动，右侧加个margin-left; .box1{ background: red; width: 200px; float: left; } .box2{ background: darkcyan; margin-left: 200px; } 2.calc()计算属性 设置固定宽并且左浮动，右侧宽度为calc(100% - 宽...
左侧固定右侧自适应，右侧固定左侧自适应，左右两边固定中间自适应的几种方法
courageFei的博客
11-01 1741
1. 左侧固定右侧自适应的方法 定位法 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style&gt; .father{ width: 100%; height: 300px; background-
两列布局左边定宽，右边自适应
马优晨
12-25 625
效果图： 代码如下： &lt;html&gt; &lt;head&gt; &lt;title&gt;文章标题&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="keywords" conte
左侧固定，右侧宽度自适应两种常见方法
qq_41170620的博客
03-26 451
左侧固定，右侧自适应 }*/ /float: left;或者是将#one中的改变 使用左侧浮动，或者是绝对定位使元素脱离文档流,使右侧的元素能够同一行显示 / /#two{ width: auto; height: 600px; background: black; margin-left: 200px; }/ /*第二种方法BFC */ #one{ width: 200px; hei...
css实现右侧固定宽度，左侧宽度自适应
ytlizhen1的专栏
05-22 1529
反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。 这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？ 要实现这种布局，也算比较简单。我们先给出html结构： div id="wrap">   div id="sidebar" sty
解决左边宽度固定，右边宽度随浏览器自适应的3种方案
杏子
07-29 6941
解决左边宽度固定，右边宽度随浏览器调整的问题前言一、思路二、代码三、总结 前言 在前端开发中，不管是自己写项目，还是应试，都会遇到这样一个问题，左边宽度固定，右边宽度随浏览器的变化而变化，今天就来分享一下解决方案。 一、思路 二、代码 三、总结 ...
探索div+css布局技巧：实现右侧固定左侧自适应的网页设计
当需要实现一个左侧内容区宽度自适应，而右侧内容区宽度固定不变的布局时，开发者通常需要利用CSS中的盒模型、浮动、定位等技术来完成设计。 ### 标题知识点解析 #### 1. HTML结构 首先，要实现一个左侧自适应...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值