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

最新推荐文章于 2022-04-26 17:06:40 发布
最新推荐文章于 2022-04-26 17:06:40 发布
阅读量129 收藏
点赞数
分类专栏： 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布局
 

栗栗子~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
两边宽度固定，中间宽度自适应的几种布局方法
xiamocsdn的博客
04-24 3444
我们在用css设置页面布局的时，归根结底是要让页面中的块按照我们的需求进行排列组合。以下是几种常用的中间自适应，两边固定的布局方法。 一、flex弹性盒布局： 核心：将父元素设置为弹性盒布局：display:flex; html代码： <div id="father"> <div id="son1"><h3>宽度固定</h3></div&g...
CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 5941
本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第一种方案，后边会写一篇博客写第二种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局 浮动布局 圣杯布局 双飞翼布局 表格布局（不推荐） 绝对定位布局（不推荐）
三栏布局（两边定宽中间自适应）的几种方法
我啥都不会
07-26 177
三栏布局 第一种方式只用float <style> *{ margin: 0; padding: 0; } .outer{ min-width: 600px; width: 100%; } .side{ width: 300px; background-color: orange; height: 100vh; } .left{
三栏布局：左右固定，中间自适应的几种方式
加强前端基础
04-26 2539
三栏布局：左右固定，中间自适应的几种方式
今日前端小知识——实现三栏布局（两侧固定宽度，中间自适应）的方法
qq_35727582的博客
03-30 1597
三栏布局的方法都掌握了吗？不仅在八股文中经常出现，实际开发中也经常会遇到，涉及的知识点也比较多（虽然比较简单），这里列出了常用的 5 种方法，一起看看吧！
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
下面和大家一起探讨和学习了一种用div+css进行的三列（三栏）布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
网页上中下三分布局即上下固定中间自适应
12-13
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <!– 禁止浏览器从本地缓存中调阅页面。–> <...–网页不保存在缓存中，每次访问都刷新页面。...
css三栏布局——两边宽度固定中间宽度自适应方法总结
qq_52622178的博客
03-31 4036
【方法一】 使用flex布局，是最简便的。 为中间区域的父盒子添加dispaly：flex，将该布局变为flex布局，flex-direction：row表示布局的排列方式为按行排列。flex：1表示来分配剩余空间，5来表示占多少份数 //html代码 <div class="layout"> <header>#header</header> <div class="container"> <div
html--三栏布局（两边固定宽度，中间自适应）
爱飞翔
12-06 2978
一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 #left{ width: 180px; height: 100%; background: blue; position: absolute; left:
三栏布局（两边固定，中间自适应）
demographic2017的博客
03-22 245
百度面试笔试中有一题是写一个三栏布局，两边固定300px，中间自适应。以为自己写对了，回来后上网才知道原来错了撒。 我的答案： 1 <div class="left">1</div> 2 <div class="center">2</div> 3 <div class="right">3</div> 4...
html css 面试题 两边固定，中间自适应布局
weixin_57089449的博客
11-25 262
两边自适应布局
css实现三栏布局（左右固定，中间自适应）
blueberry_liang的博客
05-09 922
1、浮动布局 注意html代码中三栏的先后顺序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
css布局两边固定中间自适应的五种方法
sleepwalker_1992的专栏
09-21 5635
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
热门推荐
ZXH2017的博客
03-01 1万+
前端常问的面试题，题目：假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。看到这里我希望你能停下来思考几分钟，1分钟~2分钟~3分钟~4分钟~5分钟！好了，那么你想出了几种答案呢？下面提供这道题的五种解决方案：首先要写好整个页面的布局（初始化等） &lt;style&gt; html * { padding: 0; ...
两侧固定，中间自适应的方法
依古比古学前端
09-02 324
1.利用自身浮动 左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度. 2.利用绝对定位（子绝父相） 利用绝对定位的两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度. 3.利用flex弹性布局 设置flex：1；可以自适应剩余空间。 4.利用负margin值 中间部分浮动，设置宽度100%，充满整个屏幕宽，内部一个div放置内容，利用margin留出左右两块的宽度. 5.利用display:table;
CSS(一) 经典布局（两边固定，中间自适应）的五种方式
lemaktub的博客
07-06 1733
两边固定，中间自适应 本篇总结五种思路实现方式， 圣杯布局 圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面 第一步：中间盒子100%，两边固定宽度，三个盒子依次上下 第二步：全员float：left， left与right 在第二行 脱离文档流 第三步：父级盒子 不要给宽度，margin：0 200px 留出 左右盒子位置 第四步：left 盒子 （1）margin-left:100% 将浮动元素向上移动一行文档流‘ （2）positi
css布局两边固定中间自适应的四种方法
weixin_30642305的博客
04-29 789
第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。 代码如下： <div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</di...
flex实现三栏布局中间自适应
最新发布
07-28
这是一个关于使用Flex实现圣杯布局的问题。...中间自动会被拆分为三栏，左右宽度固定，中间自适应，宽度都为100%。在中间被拆分为三栏的情况下，中间被拆分为三栏：左右宽度固定，中间自动，高度都为100%。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值