面试-三栏布局方式两边固定中间自适应

最新推荐文章于 2024-04-11 00:14:29 发布
最新推荐文章于 2024-04-11 00:14:29 发布
阅读量179 收藏
点赞数
分类专栏： css 文章标签： 面试 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45807943/article/details/123211799
版权

1. margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来

2. 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后

3. 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。

4.flex  左右固定宽  中间flex：1

5.网格布局

6. table布局
 

栗栗子~
关注
专栏目录
css 两边固定中间自适应布局的实现
09-22
在众多布局需求中，实现“两边固定、中间自适应”的页面布局是一个常见的设计需求。它指的是页面的左、右两侧内容区域宽度固定，而中间的内容区域能够自适应剩余空间的宽度。这种布局在响应式网页设计中尤为常见。在...
CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 6291
本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第一种方案，后边会写一篇博客写第二种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局 浮动布局 圣杯布局 双飞翼布局 表格布局（不推荐） 绝对定位布局（不推荐）
CSS实现三栏自适应布局（两边固定，中间自适应）
最新发布
Niucode的博客
04-11 1266
CSS实现三栏自适应布局（两边固定，中间自适应）
三栏布局（两边定宽中间自适应）的几种方法
我啥都不会
07-26 205
三栏布局 第一种方式只用float <style> *{ margin: 0; padding: 0; } .outer{ min-width: 600px; width: 100%; } .side{ width: 300px; background-color: orange; height: 100vh; } .left{
三栏布局：左右固定，中间自适应的几种方式
加强前端基础
04-26 2659
三栏布局：左右固定，中间自适应的几种方式
CSS(一) 经典布局（两边固定，中间自适应）的五种方式
lemaktub的博客
07-06 1866
两边固定，中间自适应 本篇总结五种思路实现方式， 圣杯布局 圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面 第一步：中间盒子100%，两边固定宽度，三个盒子依次上下 第二步：全员float：left， left与right 在第二行 脱离文档流 第三步：父级盒子 不要给宽度，margin：0 200px 留出 左右盒子位置 第四步：left 盒子 （1）margin-left:100% 将浮动元素向上移动一行文档流‘ （2）positi
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能...
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
网页上中下三分布局即上下固定中间自适应
12-13
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <!– 禁止浏览器从本地缓存中调阅页面。–> <...–网页不保存在缓存中，每次访问都刷新页面。...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
多分享一点点，共同进步一点点
08-18 2170
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。...
两边宽度固定，中间宽度自适应的几种布局方法
xiamocsdn的博客
04-24 3552
我们在用css设置页面布局的时，归根结底是要让页面中的块按照我们的需求进行排列组合。以下是几种常用的中间自适应，两边固定的布局方法。 一、flex弹性盒布局： 核心：将父元素设置为弹性盒布局：display:flex; html代码： <div id="father"> <div id="son1"><h3>宽度固定</h3></div&g...
五种方式实现三栏布局，左右固定中间自适应。
weixin_44954059的博客
04-27 488
1.浮动 2.定位 3.flex 4.圣杯布局 5.双飞翼布局 1.浮动： ！注意，要把middle放在最后 <style> body { margin: 0; padding: 0; } .container { width: 100%; height: 200px; } .left { width: 300px; height: 200px; background
今日前端小知识——实现三栏布局（两侧固定宽度，中间自适应）的方法
qq_35727582的博客
03-30 1759
三栏布局的方法都掌握了吗？不仅在八股文中经常出现，实际开发中也经常会遇到，涉及的知识点也比较多（虽然比较简单），这里列出了常用的 5 种方法，一起看看吧！
css布局两边固定中间自适应的常用方法
weixin_48659263的博客
10-24 1306
css布局两边固定中间自适应 <h2>1、利用自身浮动</h2> <p>左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度</p > <div class=box1> <div class="boxLeft">左边</div> <div class="boxRight">右边</div> <!-- 注意这个div
css三栏布局——两边宽度固定中间宽度自适应方法总结
qq_52622178的博客
03-31 4205
【方法一】 使用flex布局，是最简便的。 为中间区域的父盒子添加dispaly：flex，将该布局变为flex布局，flex-direction：row表示布局的排列方式为按行排列。flex：1表示来分配剩余空间，5来表示占多少份数 //html代码 <div class="layout"> <header>#header</header> <div class="container"> <div
css三列布局--两边固定中间自适应和中间固定两边自适应
热门推荐
DOM曼珠沙华的博客
03-25 2万+
三列布局    本篇讲三列布局，面试常考题，自己总结的，如有什么问题，欢迎指出！我会用红色标注出主要作用部分，都是最精简的写法，，没有多余的修饰。布局方式一:两边固定中间自适应1.flex布局    思路：将父元素box设为display:flex;可将box设置为弹性盒模型进行布局（如果对flex不了解，可点击打开链接学习）&lt;!DOCTYPE html&gt; &lt;html&gt; ...
html--三栏布局（两边固定宽度，中间自适应）
爱飞翔
12-06 3105
一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 #left{ width: 180px; height: 100%; background: blue; position: absolute; left:
三种实现左右固定，中间自适应的三栏布局方式
aa110412的博客
03-23 330
目前为止，我所熟知的左中右三栏宽度自适应于浏览器的方法有三个：绝对定位法，margin负值法以及自身浮动法。这些方法简洁实用，且无兼容性问题。 一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 首先需要三个div，将左右两边的div的position设置为absolute，左右设置为相...
CSS三栏布局解析：中间固定，两侧自适应
作者首先回顾了另一种常见的三栏布局，即左右两栏固定，中间栏自适应宽度，然后详细介绍了使用绝对定位法来实现中间固定两侧自适应的布局方法。" 在CSS布局设计中，三栏布局是一种常见的需求，特别是在网页设计中。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值