实现两边定宽，中间自适应布局（三栏布局）的七种方法

最新推荐文章于 2022-05-17 16:36:47 发布
最新推荐文章于 2022-05-17 16:36:47 发布
阅读量252 收藏 1
点赞数 1
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42561383/article/details/98921825
版权
CSS 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
HTML
7 篇文章 0 订阅
订阅专栏
浮动法
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
        } 
        div{
            height: 100%;
        }
        .left{ 
            background-color: red;
            float: left;
            width: 300px; 
        } 
        .right{ 
            background-color: yellow; 
            float: right; 
            width: 300px; 
        } 
        .center{ 
            background-color: green; 
            margin-left: 300px;
            margin-right: 300px;
        } 
    </style> 

<body> 
    <div class="left">left</div> 
    <div class="right">right</div> 
    <div class="center">center</div> 
</body>
定位法
   <style type="text/css">
       html,body{
           height: 100%;
           margin: 0;
       } 
       div{
           height: 100%;
       }
       .parent{ 
           position: relative; 
       }
       .left{ 
           background-color: red; 
           width: 300px; 
           position: absolute; 
           left: 0; 
       } 
       .right{ 
           background-color: yellow; 
           width: 300px; 
           position: absolute; 
           right: 0;
       } 
       .center{ 
           background-color: green; 
           margin-left: 300px;
           margin-right: 300px;
       }
   </style> 

<body> 
   <div class="parent"> 
       <div class="left">left</div> 
       <div class="right">right</div> 
       <div class="center">center</div>
   </div> 
</body>
弹性盒子法
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
        } 
        div{
            height: 100%;
        }
        .parent{ 
            display: flex; 
        } 
        .left{ 
            width: 300px; 
            background-color: red; 
        } 
        .right{ 
            width: 300px; 
            background-color: yellow; 
        } 
        .center{ 
            flex-grow:1; 
            background-color: green; 
        } 
    </style> 

<body> 
    <div class="parent"> 
        <div class="left">left</div> 
        <div class="center">center</div> 
        <div class="right">right</div> 
    </div> 
</body>
网格布局
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
        } 
        div{
            height: 100%;
        }
        .parent{ 
            display: grid;
            grid-template-columns: 300px auto 300px;
        }
        .left{ 
            background-color: red; 
        } 
        .right{ 
            background-color: yellow; 
        } 
        .center{ 
            background-color: green; 
        }
    </style> 

<body> 
    <div class="parent"> 
        <div class="left">left</div> 
        <div class="center">center</div> 
        <div class="right">right</div> 
    </div> 
</body>
表格布局
    <style>
        body,html{
            height: 100%;
            margin: 0;
        }
        div{
            height: 100%;
        }
        .parent{
            width: 100%;
            display: table;
        }
        .right{
            width: 300px;
            background-color: red;
            display: table-cell;
        }
        .left{
            width: 300px;
            background-color: blue;
            display: table-cell;
        }
        .center{
            background-color: yellow;
            display: table-cell;
        }
    </style>

<body> 
    <div class="parent">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
双飞翼
    <style>
        html,body{
            height: 100%;
            margin: 0;
        }
        div{
            height: 100%;
        }
        .center{
            width: 100%;
            float: left;
        }
        .main{
            background-color: blueviolet;
            margin-left: 300px;
            margin-right: 300px;
        }
        .left{
            background-color: cornflowerblue;
            width: 300px;
            float: left;
            margin-left: -100%;
        }
        .right{
            background-color: #ff0097;
            width: 300px;
            float: left;
            margin-left: -300px;
        }
    </style>

<body>
    <div  class="center">
        <div class="main">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
圣杯
    <style>
        body,html{
            height: 100%;
            margin: 0;
        }
        div{
            height: 100%;
        }
        .parent{
            padding-left: 300px;
            padding-right: 300px;
        }
        .right{
            background-color: red;
            width: 300px;
            float: left;
            margin-left: -300px;
            position: relative;
            right: -300px;
        }
        .left{
            background-color: blue;
            width: 300px;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -300px;
        }
        .center{
            background-color: yellow;
            width: 100%;
            float: left;
        }
    </style>

<body> 
    <div class="parent">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
瓜冬瓜
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三列布局：两边定宽，中间自适应，充满整个屏幕
Delicia_Lani的博客
07-18 412
一、使用flex布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ width: 100%; height: 10...
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
前端css布局两边定宽中间自适应
suisuisui_的博客
06-05 3797
1、双飞翼布局双飞翼布局的存在其实主要是因为可以加快主内容的渲染&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt;
Layout两列定宽中间自适应三列布局
weixin_30702413的博客
10-08 127
最容易理解的一种方法，以中间内容为主体，通过 margin 或者 padding 将两侧撑开，最后用 absolute 定位两侧 html: <div class="container"> <div class="left"> </div> <div class="main"></div> <div class="ri...
两栏布局（边栏定宽主栏自适应）
weixin_39808181的博客
04-19 146
<div class="layout"> <h4>方法一：float + overflow (BFC原理)</h4> <section> <aside class="orange float">aside</aside> <main class="green hidden">main</main> </section> <h4>方法二：float +...
关于如何实现左中右三栏布局, 左右固定宽度,中间随屏幕自适应
weixin_38203203的博客
10-10 475
关于如何实现左中右三栏布局, 左右固定宽度,中间随屏幕自适应 第一种: 浮动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
总的来说，实现“中间固定宽度两边自适应宽度”的三栏布局有多种方法，包括传统的浮动、绝对定位，以及现代的Flexbox和Grid布局。每种方法都有其优缺点，开发者应根据项目需求和目标浏览器的兼容性来选择合适的技术...
CSS经典三栏布局方案（6种方法）
01-19
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见 1. float布局 最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏： <style> .left { float: left; width: 100px; ...
css实现三栏布局的几种方法及优缺点
12-13
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。 我们不妨假定这样...
两边定宽，中间自适应的方法总结
专注于web前端开发
05-07 271
两边定宽，中间自适应的方法总结。 float + margin实现： //html <div class="parent"> <div class="left">Left</div> <div class="right">Right</div> <!--特别需要注意：自适应宽度的div必须放在最...
左右两列定宽，中间自适应的方法
fydxx的博客
03-06 506
1. 使用flex布局&lt;div class="container"&gt; &lt;div class="left"&gt;left&lt;/div&gt; &lt;div class="middle"&gt;middle&lt;/div&gt; &lt;div class="right"
CSS 三列布局 （两边固定宽度，中间自适应）
hahahahahahahaha__1的博客
04-21 719
1.position + margin： 缺点：当浏览器的窗口过小时，可能会出现多层重叠现象。 HTML结构：  &lt;div class='contain'&gt;         &lt;div class='left'&gt;&lt;/div&gt;         &lt;div class='right'&gt;&lt;/div&gt;        &lt;div class=...
CSS实现两边定宽，中间自适应（即三栏自适应布局）最全答案
Wonder
05-26 948
主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1 自身浮动法 原理：对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。 .left{ float: left; width: 200px; height: 420px; } .right{ float: right; padding:.
三列布局（两边定宽，中间自适应）
wenmin1987的博客
03-05 286
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;两边定宽，中间自适应&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0;...
左右定宽，中间自适应布局三种方式
你还有我
12-23 1068
目录圣杯布局（结构简单，理解绕弯）双飞翼布局（结构较绕）弹性盒子实现三栏（结构简单，理解复杂） 圣杯布局（结构简单，理解绕弯） 原理：外盒子的padding+ （left right）的相对定位 <style> body{ color:white; min-width: 900px; } .center{ width: 100%; height
经典布局问题——两边定宽，中间自适应的6种布局方法
tengxi_5290的博客
05-17 603
左右浮动 float: left | right; 对两边元素分别设置float为left、right。 浮动元素后面记得清浮动，不然页面布局会混乱，兼容性好。 绝对定位 容器设置position为relative，内容均设置position为absolute，用left=0，left=firstContentWidth，right=0控制左中右位置。 脱离文档流，兼容性较好。 .container { position: relative; } .item { posit
CSS(一) 经典布局（两边固定，中间自适应）的五种方式
lemaktub的博客
07-06 1797
两边固定，中间自适应 本篇总结五种思路实现方式， 圣杯布局 圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面 第一步：中间盒子100%，两边固定宽度，三个盒子依次上下 第二步：全员float：left， left与right 在第二行 脱离文档流 第三步：父级盒子 不要给宽度，margin：0 200px 留出 左右盒子位置 第四步：left 盒子 （1）margin-left:100% 将浮动元素向上移动一行文档流‘ （2）positi
CSS实现经典三栏布局（两侧定宽，中间自适应）
u013853928的博客
10-31 993
html代码: css代码: #left{ float: left; width:100px; height: 100px; background-color: #00A5FF; } #right{ float: right; width:100px; h
使用CSS实现三列布局（左右固定宽度，中间自适应）六种方法
Lee_taotao的博客
06-03 1757
1、利用左右浮动，脱离文档流，中间元素正常，设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后) 如果窗口太小，右边元素会被挤到下一行 <head> <style> .box{ height: 200px; padding: 0 200px 0 100px; } .l...
flex实现三栏布局中间自适应
最新发布
07-28
这是一个关于使用Flex实现圣杯布局的问题。...中间自动会被拆分为三栏，左右宽度固定，中间自适应，宽度都为100%。在中间被拆分为三栏的情况下，中间被拆分为三栏：左右宽度固定，中间自动，高度都为100%。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值