两边固定，中间自适应布局

最新推荐文章于 2024-06-26 11:38:48 发布
最新推荐文章于 2024-06-26 11:38:48 发布
阅读量1k 收藏 4
点赞数
文章标签： 布局 html、css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43953753/article/details/85813820
版权

1.浮动，先左右再中

.left{
    float: left;
    width: 300px;
    height: 100px;
    background: #000;
}
 .right{
     width: 300px;
     height: 100px;
     float: right;
     background: pink;
 }
 .main{
     height: 100px;
     background: blue;
 }


<div class="contain">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"><h1>aa</h1></div>
</div>

2.绝对定位

  .left{
            position:absolute;
            width: 300px;
            height: 100px;
            background: #000;
            left: 0;
        }

        .right{
            position: absolute;
            width: 300px;
            height: 100px;
            background: pink;
            right: 0;
        }
        .main{
            position: absolute;
            left: 300px;
            right: 300px;
            height: 100px;
            background: blue;
        }


    </style>
</head>
<body>
<div class="contain">
    <div class="left"></div>
    <div class="main">aa</div>
    <div class="right"></div>
</div>

3.弹性布局 flex 左中右

  .contain{
            display: flex;
            flex-flow: wrap row;
        }
       .left{
           width: 300px;
           height: 100px;
           background: #000;
       }

        .right{
            width: 300px;
            height: 100px;
            background: pink;
        }
        .main{
            flex: 1;
            height: 100px;
            background: blue;
        }


    </style>
</head>
<body>
<div class="contain">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

4.表格 布局

 .contain{
            width: 100%;
            display: table;
            height: 100px;
        }
        .contain div{
            display: table-cell;
        }
        .left{
            width: 300px;
            height: 100px;
            background: #000;
        }

        .right{
            width: 300px;
            height: 100px;
            background: pink;
        }
        .main{
            height: 100px;
            background: blue;
        }
        
    </style>
</head>
<body>
<div class="contain">
    <div class="left"></div>
    <div class="main">aa</div>
    <div class="right"></div>
</div>

5.网格布局

 .contain{
            display: grid;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 100px;
        }
        .left{
            background: #000;
        }
        .main{
            background: blue;
        }
        .right{
            background: pink;
        }
        
    </style>
</head>
<body>
<div class="contain">
    <div class="left">11111111</div>
    <div class="main">aa</div>
    <div class="right">44444444444444444</div>
</div>
zjx丶
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css 两边固定中间自适应布局的实现
09-22
主要介绍了css 两边固定中间自适应布局的实现，介绍了四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
前端实现两边固定中间自适应布局
qq_41915137的博客
03-14 158
这些方法中，Flexbox和Grid布局是现代前端开发中推荐的方式，因为它们更加灵活和强大。使用CSS的Flexbox布局可以很容易地实现这种布局。可以为两边的元素设置固定的。对于不支持Flexbox或Grid的旧浏览器，可以使用传统的。使用绝对定位也可以实现，但这种方法需要注意的是，中间内容的。要设置得足够大，以避免内容被两边的固定宽度元素覆盖。布局和绝对定位方法可以作为兼容旧浏览器的备选方案。，然后设置两边的元素宽度固定，中间元素的。，这样它会占据剩余的空间。宽度，而中间的元素设置为。
flex实现左右两边固定中间自适应
LRQQHM的博客
06-26 116
【代码】flex实现左右两边固定中间自适应。
html图片两边固定 中间自适应,CSS三栏布局——中间固定两边自适应宽度
weixin_28904519的博客
06-04 204
今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局，而且是中间固定左右两边自适应宽度，听起来蛮有意思的。因为以前只是碰到过，左右两列固定而中间自适应的运用。于是思考一下马上敲起了键盘自己实战了一下，接着与大家一起测试，还是通过了各浏览器的考验，为了方便自己以后好查阅，也想让不知道的朋友一起学习一下这样的布局，特整理了一下代码，贴上来与大家...
CSS实现三列布局两边固定中间自适应
Tonghanhan的博客
06-27 491
使用这两个属性来实现两侧宽度固定中间自适应，flex-grow会在剩余宽度变化时自动分配宽度。
两边固定中间自适应布局
是秃子总会发光
11-27 152
两边固定中间自适应布局
面试-三栏布局方式两边固定中间自适应
Mr. Ding的小博客
03-01 132
1. margin负值法：左右两栏均左浮动，左右两栏采用负的margin值。中间栏被宽度为100%的浮动元素包起来 2. 自身浮动法：左栏左浮动，右栏右浮动，中间栏放最后 3. 绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。 4.flex 左右固定宽 中间flex：1 5.网格布局 6. table布局 ...
css布局两边固定中间自适应的五种方法
sleepwalker_1992的专栏
09-21 5675
&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布局两边固定中间自适应的常用方法
weixin_48659263的博客
10-24 1273
css布局两边固定中间自适应 <h2>1、利用自身浮动</h2> <p>左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度</p > <div class=box1> <div class="boxLeft">左边</div> <div class="boxRight">右边</div> <!-- 注意这个div
在php中页面布局 3列左右侧固定中间自适应居中,css实现两边固定中间自适应布局的四种常用方法...
weixin_36256707的博客
03-21 146
本篇文章给大家带来的内容是关于css实现两边固定中间自适应布局的四种常用方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。解析四种常用方法以及原理：浮动、浮动内嵌 div、定位、flex。浮动.wrap {background: #eee; padding: 20px; }p {margin: 0; }.left {width: 200px; height: 200px; flo...
两边固定中间自适应布局---圣杯布局与双飞翼布局
qq_40436793的博客
09-06 146
一、圣杯布局与双飞翼布局区别 如果将布局结构拆分成容器、左固定、中适应、右固定四部分，在圣杯布局中，左固定、中适应和右固定三部分都位于容器中；而在双飞翼布局中，只有中适应位于容器中，左固定和右固定两部分位于容器外。 在代码中结构如下： 圣杯布局 <div class="container"> <div class="left"></div> <div class="center"></div> <div
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能...
css实现中间固定宽度两边自适应布局
10-14
使用css实现的三列布局，中间一列宽度固定大小，两边宽度要自适应。
css实现两栏固定中间自适应的方法
09-22
主要介绍了css实现两栏固定中间自适应的方法，主要介绍了4种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
js首尾固定中间自适应布局
03-26
可以使用CSS的flex布局，将容器设置为flex布局，然后通过设置flex-grow属性使中间的内容自适应宽度，而固定的头部和尾部则可以设置固定宽度。 HTML结构： ```html <div class="container"> <div class="header">Header</div> <div class="content">Content</div> <div class="footer">Footer</div> </div> ``` CSS样式： ```css .container { display: flex; flex-direction: column; height: 100vh; /* 让容器铺满整个屏幕 */ } .header { height: 50px; background-color: #ccc; flex-shrink: 0; /* 固定高度 */ } .content { flex-grow: 1; /* 自适应宽度 */ background-color: #eee; } .footer { height: 50px; background-color: #ccc; flex-shrink: 0; /* 固定高度 */ } ``` 这样就实现了一个简单的js首尾固定中间自适应布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值