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

最新推荐文章于 2021-04-03 17:33:59 发布
最新推荐文章于 2021-04-03 17:33:59 发布
阅读量1.8k 收藏 5
点赞数 1
分类专栏： css3 js 文章标签： js常见布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chongxiaocheng/article/details/83577932
版权
js 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
css3
2 篇文章 0 订阅
订阅专栏

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

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

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

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

1-4, 方法2的衍生

chongxiaocheng
关注
专栏目录
左边宽度固定，右边自适应
LuckXinXin的博客
05-24 1002
左侧固定宽度，右侧自适应宽度的两列布局实现 html结构 <div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div> </div> 在外层div（类名为outer）的div中，有两个子div，类名分别为left和right，其中left为固定宽度，而right为自适应宽度 方法1：左侧div设置成浮动：flo...
实现左侧固定宽度, 右侧自适应的两栏布局的八种方案
技术无止境，人生仍探索。
07-23 4890
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
布局-左侧固定宽度，右侧自适应
木习习的博客
07-01 355
一种非常常见的布局需求，简单归纳下多重实现方式。 先来个简单的html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> &...
左边定宽右边自适应布局方法
just try
03-30 265
在开发业务管理系统时，会遇到左边定宽，右边宽度自适应的问题，比如以下的情况 方法一：左边设置左浮动，右边宽度设置100% .left{ float: left; } .right{ width: 100%; } 方法二： 父容器设...
CSS左侧固定宽 右侧自适应（兼容所有浏览器）
吃瓜群众的博客
10-23 2705
方法一、浮动布局 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布局
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
CSS创建两栏布局（左侧宽度固定，右侧宽度自适应）的几种方式
webchang的博客
04-03 1799
CSS创建两栏布局的方法（代码演示）
css实现左侧固定右侧自适应的布局方式
09-22
在前端开发中，实现左侧固定宽度、右侧自适应宽度的布局是一种常见的需求，这样的布局能够适应不同屏幕大小，提高页面布局的灵活性和用户体验。以下将介绍三种使用CSS来实现这种布局的方式。 ### 浮动布局（Float ...
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
在网页设计中，创建左右两栏布局并且支持用户通过拖动改变两栏宽度是一种常见的交互方式，这可以提供更灵活的界面体验。本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是...
两栏布局之右边固定左边自适应
qq_41801117的博客
03-24 1924
两栏布局是咱们在项目中经常遇到的一种布局方式，在这里记录一下两栏布局之右边固定，左边自适应的布局方式。 首先给定2个div盒子。 <div id="app"> <div class="left"></div> <div class="right"></div> </div> 1、flex布局，我比较喜欢采用的一种，简单粗暴，但是flex可能存在兼容性问题，如果是手机端就可以放心使用。首先设置display: flex，让
左侧固定，右侧宽度自适应
cindy_rain的博客
11-20 1822
这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。 html部分<div class="box1"> <div class="divA">DIVA</div> <div class="divB">
css实现左侧固定宽度，右侧宽度自适应
fjz9889889的博客
01-14 393
为了适应不同浏览器宽度，类名为kindtext需要自适应宽度。 代码如下 <div class="big-box"> <div class="bigIcon"></div> <div class="kindTitle">大类：</div> <div class="kindText">化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品
web前端面试-------css实现左侧固定宽度，右侧宽度自适应的五种方式
别告诉我有Bug
09-13 6011
1.浮动布局     左侧设置固定宽并且左浮动，右侧加个margin-left; .box1{ background: red; width: 200px; float: left; } .box2{ background: darkcyan; margin-left: 200px; } 2.calc()计算属性 设置固定宽并且左浮动，右侧宽度为calc(100% - 宽...
左侧固定右侧自适应，右侧固定左侧自适应，左右两边固定中间自适应的几种方法
courageFei的博客
11-01 1687
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 471
效果图： 代码如下： &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 378
左侧固定，右侧自适应 }*/ /float: left;或者是将#one中的改变 使用左侧浮动，或者是绝对定位使元素脱离文档流,使右侧的元素能够同一行显示 / /#two{ width: auto; height: 600px; background: black; margin-left: 200px; }/ /*第二种方法BFC */ #one{ width: 200px; hei...
css实现右侧固定宽度，左侧宽度自适应
ytlizhen1的专栏
05-22 1423
反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。 这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？ 要实现这种布局，也算比较简单。我们先给出html结构： div id="wrap">   div id="sidebar" sty
解决左边宽度固定，右边宽度随浏览器自适应的3种方案
杏子
07-29 6294
解决左边宽度固定，右边宽度随浏览器调整的问题前言一、思路二、代码三、总结 前言 在前端开发中，不管是自己写项目，还是应试，都会遇到这样一个问题，左边宽度固定，右边宽度随浏览器的变化而变化，今天就来分享一下解决方案。 一、思路 二、代码 三、总结 ...
左边定宽-右边自适应的几种方法
zhazhawei9527的博客
05-13 565
左边定宽200px，右边自适应 body中的代码 <body> <div class="wai"> <div class="left"></div> <div class="right"></div> </div> </body> 设置公共样式 .wai{ width: 100%; height: 500px; border: 1px solid yellow; } .left
CSS实现：左固定宽右自适应等高布局
本文主要探讨了如何使用纯CSS实现一种特定的布局模式，即左侧固定宽度，右侧自适应屏幕宽度，并且左右两列保持等高布局。这种布局常见于网页设计中，要求在不依赖JavaScript或CSS行为的情况下完成。文章通过分析问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值