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

最新推荐文章于 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 1024
左侧固定宽度，右侧自适应宽度的两列布局实现 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 4929
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 371
一种非常常见的布局需求，简单归纳下多重实现方式。 先来个简单的html结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> &...
左边定宽右边自适应布局方法
just try
03-30 277
在开发业务管理系统时，会遇到左边定宽，右边宽度自适应的问题，比如以下的情况 方法一：左边设置左浮动，右边宽度设置100% .left{ float: left; } .right{ width: 100%; } 方法二： 父容器设...
CSS左侧固定宽 右侧自适应（兼容所有浏览器）
吃瓜群众的博客
10-23 2714
方法一、浮动布局 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 1835
CSS创建两栏布局的方法（代码演示）
css实现左侧固定右侧自适应的布局方式
09-22
在前端开发中，实现左侧固定宽度、右侧自适应宽度的布局是一种常见的需求，这样的布局能够适应不同屏幕大小，提高页面布局的灵活性和用户体验。以下将介绍三种使用CSS来实现这种布局的方式。 ### 浮动布局（Float ...
前端面试：两边固定，中间自适应布局
elite_zhou的博客
03-28 601
普通实现 <style> .box{ display:flex } .left,.right{ width:200px height:600px background:red } .center{ width:100% height:600px background:greed } </style> <body> <div class="box"> <div class="left"></div
左定宽度右自适应宽度并且等高布局实现代码
12-13
在CSS布局中，实现"左定宽度右自适应宽度并且等高布局"是一个常见的需求，尤其是在构建网页布局时。这个需求通常涉及到固定宽度的侧边栏（左侧栏）和自适应宽度的内容区域（右侧栏）。在给定的面试题中，还有等高...
左侧固定，右侧宽度自适应
cindy_rain的博客
11-20 1838
这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。 html部分<div class="box1"> <div class="divA">DIVA</div> <div class="divB">
css实现左侧固定宽度，右侧宽度自适应
fjz9889889的博客
01-14 404
为了适应不同浏览器宽度，类名为kindtext需要自适应宽度。 代码如下 <div class="big-box"> <div class="bigIcon"></div> <div class="kindTitle">大类：</div> <div class="kindText">化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品化妆品
web前端面试-------css实现左侧固定宽度，右侧宽度自适应的五种方式
别告诉我有Bug
09-13 6029
1.浮动布局     左侧设置固定宽并且左浮动，右侧加个margin-left; .box1{ background: red; width: 200px; float: left; } .box2{ background: darkcyan; margin-left: 200px; } 2.calc()计算属性 设置固定宽并且左浮动，右侧宽度为calc(100% - 宽...
左侧固定右侧自适应，右侧固定左侧自适应，左右两边固定中间自适应的几种方法
courageFei的博客
11-01 1699
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 484
效果图： 代码如下： &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 392
左侧固定，右侧自适应 }*/ /float: left;或者是将#one中的改变 使用左侧浮动，或者是绝对定位使元素脱离文档流,使右侧的元素能够同一行显示 / /#two{ width: auto; height: 600px; background: black; margin-left: 200px; }/ /*第二种方法BFC */ #one{ width: 200px; hei...
css实现右侧固定宽度，左侧宽度自适应
ytlizhen1的专栏
05-22 1445
反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。 这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？ 要实现这种布局，也算比较简单。我们先给出html结构： div id="wrap">   div id="sidebar" sty
解决左边宽度固定，右边宽度随浏览器自适应的3种方案
杏子
07-29 6648
解决左边宽度固定，右边宽度随浏览器调整的问题前言一、思路二、代码三、总结 前言 在前端开发中，不管是自己写项目，还是应试，都会遇到这样一个问题，左边宽度固定，右边宽度随浏览器的变化而变化，今天就来分享一下解决方案。 一、思路 二、代码 三、总结 ...
左边定宽-右边自适应的几种方法
zhazhawei9527的博客
05-13 580
左边定宽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、付费专栏及课程。

余额充值