两边固定中间自适应的解决方案及其区别

最新推荐文章于 2024-08-02 20:34:24 发布
最新推荐文章于 2024-08-02 20:34:24 发布
阅读量268 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cainiaoysa/article/details/113445666
版权

两边固定中间自适应的解决方案及其区别

方式一：左右float浮动脱离文档流，中间水平居中布局（中间层放第三个位置）

  		*{
            margin:0;
            padding:0;
        }
        .left,.right {
            width:80px;
            background:rgba(190, 18, 46,0.3);
        }
        .left {
            float:left;
        }
        .right {
            float:right;
        }
        .middle {
            background:olive;
            margin:0 80px;
        }

<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">float布局，中间的自适应要放在第三个位置，float布局，左右的div块元素会脱离文档流</div>
    <p>目前观察，该自适应只适合pc端，不适合移动端，有待进一步论证。</p>
    <p>移动端不能自适应的原因是因为之前设的左右的宽度太宽了，不能超过375宽度</p>
</body>

区别：有margin：0 80px 的居中效果

在这里插入图片描述

区别：没有margin：0 80px 的居中效果

在这里注销margin: 0 80px;
在这里插入图片描述

  1. 没有margin:0 80px; 的效果 ，左右块元素虽然脱离文档流，当时中间的自适应没有从最左边开始，有一种环绕的效果。
  2. 中间的自适应要放在第三个div标签的位置，如果放在中间，就会占据一格，把right挤下去。
    中间自适应放在第二级的效果

方式二：左右display:absolute脱离文档流，中间水平居中布局（中间层放第三个位置）

 		*{
            margin:0;
            padding:0;
        }
        .left,.right {
            position:absolute;
            width:30px;
            height:20px;
            background:rgba(112, 160, 17,0.4);
        }
        .left {
            left:0;
        }
        .right {
            right:0;
        }
        .middle {
            margin: 0 30px;
            background:wheat;
        }

 <div class="left">left</div>
 <div class="right">right</div>
 <div class="middle">绝对定位布局，也会脱离文档流，如果不设置左右居中，布局就会从最左边开始</div>

区别：有margin：0 30px 的居中效果

在这里插入图片描述

区别：没有margin：0 30px 的效果

注销margin：0 30px;的效果
在这里插入图片描述
在这里插入图片描述

  1. 没有margin:0 30px; 的效果 ，左右块元素虽然脱离文档流，当时中间的自适应从最左边开始，被压在了左边的浮动块下面。

  2. 中间的自适应要放在第三个div标签的位置，如果放在中间，就会占据一格，把right挤下去。
    在这里插入图片描述

方式三：父容器display:flex不脱离文档流，中间水平居中布局（中间层放第二个位置）

*{
            margin:0;
            padding:0;
        }
        .parent {
            display:flex;
        }
        .left,.right {
            width:80px;
            height:20px;
            background:rgba(146, 16, 38,0.4);

        }
        .middle{
            flex:1;
            margin:0 80px;
            background:saddlebrown;
        }

<div class="parent">
        <div class="left">left</div>
        <div class="middle">父容器display为flex的弹性布局</div>
        <div class="right">right</div>
    </div>

区别：有margin：0 80px 的居中效果

margin：0 111px的情况下，左右2边都变短了，但是中间是要在非常窄的情况，一般状态下，左右不会变化

margin：0 -45px的情况下，左右2边也被污染了。

  1. 有margin:0 30px; 的效果 ，左右块元素不会脱离文档流，当时中间的自适应块元素会污染左右的块元素。

区别：没有margin：0 80px 的效果

左右固定，没有污染
在这里插入图片描述

  1. 中间的自适应要放在第二个div标签的位置，如果放在第三个位置，就会最左边自适应。

在这里插入图片描述
在这里插入图片描述

方式四：父容器display:table不脱离文档流，中间水平居中布局（中间层放第二个位置）

 		*{
            margin:0;
            padding:0;
        }
        .parent {
            display:table;
            width:100%;
        }
        .left,.right{
            display:table-cell;
            width:40px;
            height:40px;
            background:darkblue;
        }
        .middle{
            background:saddlebrown;
         
        }

	<div class="parent">
        <div class="left">left</div>
        <div class="middle">父容器display:table的布局方式</div>
        <div class="right">right</div>
    </div>

区别没有给父元素设置width：100%

在这里插入图片描述
在这里插入图片描述

区别 有父容器设置为width:100%;

在这里插入图片描述
在这里插入图片描述

区别 中间的层放在第三个位置

在这里插入图片描述

区别 中间层margin:0 -21px;在这里插入图片描述

  1. 中间层margin:0 -21px，中间层在左边的上面，中间层在右边的下面。

中间的margin: 0 36px;左右的不受影响
中间的margin: 0 221px;左右的受影响

学习机器 | 苏菲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
目标检测YOLO实战应用案例100讲-无监督领域自适应目标检测方法研究与应用
qq_36130719的博客
06-26 1333
本章首先介绍了本文工作所使用的目标检测框架Faster R­CNN，然后阐述了领域自适应目标检测的相关理论基础，最后介绍本文所用到的目标检测评价指标。Faster R­CNN[10]是经典的两步目标检测模型，该模型提出用RPN来选取候选区域，实现了检测与分类为一体的端到端网络。目前许多领域自适应目标检测工作均是基于Faster R­CNN，为了方便实验效果对比，本文的所有工作同样也是在Faster R­CNN上进行改进，当然其他目标检测器比如YOLO系列也可以稍作修改后适配。
【图像超分】论文精读：Navigating Beyond Dropout: An Intriguing Solution Towards Generalizable Image Super Resol
畅游计算机视觉的海洋
05-28 685
近年来，深度学习在单图像超分辨率 (SISR) 性能方面取得了巨大飞跃。虽然大多数现有的工作假设一个简单而固定的退化模型(如双三次下采样)，但盲SR的研究试图提高模型泛化能力，退化未知。最近，Kong等人[37]利用Dropout[63]研究了更合适的盲SR训练策略。尽管这种方法确实通过减轻过度拟合带来了实质性的改进，但我们认为 Dropout 同时引入了不希望的副作用，这损害了模型忠实地重建精细细节的能力。我们在本文中展示了理论和实验分析，此外，我们提出了另一种简单而有效的训练策略，通过简单地调制模型的一
面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
weixin_44475093的博客
04-08 614
一、背景在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高PS: 文末有彩蛋两栏布局两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一...
综合布线实训室解决方案（转载）
JokerLeu的专栏
12-21 4801
综合布线实训室解决方案【C0】（本科-理论型）   十三、综合布线实训室实训项目和内容【C0】（本科-理论型）   一）网络专业知识学习内容： 1、网络系统认知。1课时。教学设备为网络系统工程教学模型。 1）全面理解和掌握园区网络系统工程全貌，包括网络中心和综合楼网络系统。教学模型由一栋园区网络中心，1栋三层综合楼和园区室外管网系统组成，配套有灯光指示系统和智能
css 图片自适应_104道 CSS 面试题，助你查漏补缺（下）
weixin_39879122的博客
11-20 978
(给前端大全加星标，提升前端技能)作者：CavsZhouyouhttps://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/master/Css/Css.md目录52.layoutviewport、visualviewport 和 idealviewport 的区别？[1]53.position:fixed;在 andr...
校园网综合布线设计方案
热门推荐
千尺浪的博客
12-19 7万+
摘  要 本文主要针对中国国防科大校园网建设需求提供网络综合布线解决方案，在该方案中主要对中国国防科大校园网的综合布线的各项需求进行仔细分析，并且详细对设计目标、系统设计原则、设计标准、系统产品选型及产品简介、总体系统设计方案、线槽及线缆布设要求和综合布线测试与验收等内容进行说明。通过中国国防科大校园网综合布线设计方案可以为中国国防科大校园网建设成为高性能的校园网，提高学校教学与科研的综合实力，
页面布局的方式及其优缺点
前端小白菜
07-21 1万+
双飞翼、多栏布局、弹性布局、瀑布流布局等
智慧城市智能交通系统建议方案
找方案
09-14 2305
第1章设计原则 市公安交通集成指挥平台设计方案遵循以下设计原则： 经济性 在充分满足系统运行技术与性能要求的前提下，尽量采用性能价格比高的产品与技术，并在项目实施过程中本着厉行节约的原则，精打细算，以保证项目建设的合理开销。 实用性 充分利用成熟的先进技术。避免盲目追求新技术，同时又要防止系统处理能力不够的现象出现。应用软件符合管理需要，易于维护，系统实用。 先进性 通过引进、二次开发和整体集成，使市公安交通集成指挥平台在国内同等城市规模中居于先进水平，并在系统实际运行过程中，建立紧密...
基于乐吾乐meta2d从零实现可视化流程图编辑器（二）主界面布局及其初始化
le5le_iot的博客
09-07 326
meta2d是乐吾乐开源的2D图元组成的可视化引擎，集实时数据展示、动态交互、数据管理等一体的全功能2D可视化引擎。能够快速实现数字孪生、大屏可视化、Web组态、SCADA等解决方案。具有实时监控、多样、变化、动态交互、高效、可扩展、支持自动算法、跨平台等特点，最大程度减少研发和运维的成本，并致力于普通业务人员 0 代码开发实现物联网、工业互联网、电力能源、水利工程、智慧农业、智慧医疗、智慧城市等可视化解决方案。
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解左右宽度固定中间自适应html布局解决方案
01-19
本文介绍了详解左右宽度固定中间自适应html布局解决方案，分享给大家，具体如下： a.使用浮动布局 html结构如下 <div class=left>left <div class=right>right <div class=center>center //此处注意要先渲染左...
4种Android屏幕自适应解决方案
01-05
本文就介绍了4中Android屏幕自适应解决方案。 一、细说layout_weight 目前最为推荐的Android多屏幕自适应解决方案。 该属性的作用是决定控件在其父布局中的显示权重，一般用于线性布局中。其值越小，则对应的...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能...
css实现两栏固定中间自适应的方法
09-22
主要介绍了css实现两栏固定中间自适应的方法，主要介绍了4种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS技巧专栏：一日一例 18 -纯CSS实现背景浮光掠影的按钮特效
uu0216的博客
08-02 724
按钮是好几种颜色的背景色组成的，使用css的话，应该会有几个不同颜色的层，在按钮后面移动。每个层互相叠加，大概还会用到图片混合模式产生了更多的叠加的颜色，然后边缘过渡的话，就是用模糊滤镜了。
项目中万能使用tailwindcss，无版本冲突、报错
xxx
08-02 93
新建两个css文件tailwindInput.css、tailwindOutput.css。
HTML,CSS,JavaScript实现——井字棋游戏
Rverdoser的博客
08-02 266
这段代码提供了一个3x3的井字棋盘，并使用CSS grid布局来创建这个棋盘。接下来，需要添加JavaScript代码来处理玩家的移动，以及判断输赢。这些逻辑会涉及事件监听、条件判断以及DOM操作。这里只提供实现井字棋游戏的核心HTML和CSS代码。具体的JavaScript逻辑（如处理玩家移动、判断胜负等）需要根据实际情况编写。// 这里添加JavaScript代码来实现游戏逻辑。
前端的学习-CSS（弹性布局-flex）
最新发布
m0_68823256的博客
08-02 887
CSS的定位-给父元素设置的属性
css 两边自适应 中间固定宽度居中
05-16
这个问题中的需求是实现一个宽度固定，两侧自适应的布局。可以使用Flexbox布局或者CSS Grid布局来实现。具体实现方法如下： 使用Flexbox布局： ``` <div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> .container { display: flex; } .left, .right { flex: 1; } .center { width: 960px; margin: 0 auto; } ``` 使用CSS Grid布局： ``` <div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> .container { display: grid; grid-template-columns: 1fr auto 1fr; } .center { width: 960px; justify-self: center; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值