关于如何实现左中右三栏布局, 左右固定宽度,中间随屏幕自适应

最新推荐文章于 2022-08-18 09:49:53 发布
最新推荐文章于 2022-08-18 09:49:53 发布
阅读量478 收藏 1
点赞数
分类专栏： html+css
原文链接：https://www.cnblogs.com/hhsy/p/5777534.html
版权

关于如何实现左中右三栏布局, 左右固定宽度,中间随屏幕自适应

第一种: 浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
            #left{
                width: 200px;
                height: 200px;
                float: left;
                background-color: red;
            }
            #right{
                width: 150px;
                height: 200px;
                float: right;
                background-color: mistyrose;
            }
            #middle{
                height: 200px;
                margin: 0 150px 0 200px;
                background-color: saddlebrown;            
                word-break: break-word;    
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div id="left">我是左侧内容我是左侧内容我是左侧内容我是左侧内容我是左侧内容</div>
            <div id="right">我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容</div>
            <div id="middle">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
        </div>
    </body>
</html>

 

第二种: 浮动+定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }            
            #middle{
                position: absolute;
                left: 200px;
                right: 150px;
                height: 200px;
                background-color: red;
                word-break: break-word;
            }
            #left{
                width: 200px;
                height: 200px;
                float: left;
                background-color: blue;
            }
            #right{
                width: 150px;
                height: 200px;
                float: right;
                background-color: yellow;
            }
            
        </style>
    </head>
    <body>
        <div id="content">
            <div id="left">我是左侧内容我是左侧内容我是左侧内容我是左侧内容我是左侧内容</div>
            <div id="middle">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
            <div id="right">我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容</div>
        </div>
    </body>
</html>

第三种: display:box

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #content {
                display: -webkit-box;
                display: -moz-box;
                width: 100%;
                height: 200px;
            }
            
            #left {
                width: 200px;
                height: 200px;
                background-color: saddlebrown;                
            }
            #middle{
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                background-color: blue;
                word-wrap: break-word;
            }
                
            #right {
                width: 200px;
                height: 200px;
                background-color: saddlebrown;
            
            }
        </style>
    </head>

    <body>
        <div id="content">
            <div id="left">asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </div>
            <div id="middle">PasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadasdfgggadP为让对手阿萨德刚回家后</div>
            <div id="right">fggfgf</div>
        </div>
    </body>

</html>

weixin_38203203
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
在网页设计中，创建左右两栏布局并且支持用户通过拖动改变两栏宽度是一种常见的交互方式，这可以提供更灵活的界面体验。本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是...
三栏布局：左右固定，中间自适应的几种方式
加强前端基础
04-26 2602
三栏布局：左右固定，中间自适应的几种方式
五种方法实现三栏布局（左右固定中间自适应）
az44yao的专栏
06-07 541
一、Float布局 布局分析: 布局方案 实现 优点 缺点 Float布局 左右中三列，左列左浮动，右列右浮动，中间列设置左右margin 比较简单，兼容性也比较好 浮动元素脱离文档流，使用的时候只需要注意一定要清除浮动。 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co...
三种实现左右固定，中间自适应的三栏布局方式
aa110412的博客
03-23 315
目前为止，我所熟知的左中右三栏宽度自适应于浏览器的方法有三个：绝对定位法，margin负值法以及自身浮动法。这些方法简洁实用，且无兼容性问题。 一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 首先需要三个div，将左右两边的div的position设置为absolute，左右设置为相...
1. 实现左中右三栏布局，左右固定宽度，中间自适应（五种方式）（清除浮动）
sunnnnh的博客
04-24 2176
五种方法：1.浮动 float 2.定位 position 3.弹性盒子布局 flex 4.表格布局 table 5.网格布局 grid 方法1：浮动 --float （1）浮动原理： 当一个元素浮动之后，就会移出正常的文档流（内联元素与p标签会识别float为正常文档流。），向左或向右平移，直到碰到了所处容器的边缘，或者碰到另外一个浮动的元素。 一旦让div浮动起来，其父元素立刻会像inline一样产生包裹性（包裹性就是父元素的宽度会收缩到和内部元素宽度一样，float属性会改变元素dis...
CSS实现三栏布局的8种方式
cute_ming的博客
04-24 1471
1、float实现三栏布局 给左盒子设置float：left，给右盒子设置float：right，中间盒子设置margin-left和margin-right。需要注意的是，左右盒子要放在中间盒子之前。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
10-31
- **固定中栏宽度**：对于三栏布局，可以固定中间栏的宽度，而左右两侧栏自适应。这同样可以通过浮动、负外边距或现代CSS布局技术来实现。 - **最小高度100%，页脚保持在底部的布局**：为了确保页面在内容较少时...
三栏布局--左右宽度固定，中间自适应宽度
12-25
以上三种方法都可以实现三栏布局中左右宽度固定、中间自适应宽度的效果。其中，设置浮动的方法最为简单直观；利用负边距的方法稍微复杂一些，但可以减少额外的标记；而采用绝对定位的方法虽然更为灵活，但也可能带来...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
多分享一点点，共同进步一点点
08-18 2106
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。...
-左中右三栏布局(p m)
rocktanga的博客
11-15 849
引言：布局是页面中的一个很重要的东西，这篇文章主要讨论与浮动有关的左中右三栏布局。 一、基础的左中右三栏布局 这个布局呢，就是由三个部分组成：左右放在前面，而主内容放在后面。一个左浮动，一个右浮动，都设置固定宽度，主内容区宽度自适应，只需要设置margin和前面两个块隔开就好。如下： .wrap { width: 80%; margin: 0 auto; } .left { float: left; width: 200px; height: 200px; background
我学习的三种三栏（左中右）布局方法
weixin_30892763的博客
04-25 1028
我学习的三种三栏（左中右）布局方法（不想要自适应的话设置一个宽度即可） 绝对定位方法，两边用绝对定位固定在窗口两边，中间采用自适应宽度，利用margin属性把两边撑开。代码如下： <style type="text/css"> * {margin: 0;} .left{position: absolute;top: 0;left: 0;width: 300p...
前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应
热门推荐
ZXH2017的博客
03-01 1万+
前端常问的面试题，题目：假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。看到这里我希望你能停下来思考几分钟，1分钟~2分钟~3分钟~4分钟~5分钟！好了，那么你想出了几种答案呢？下面提供这道题的五种解决方案：首先要写好整个页面的布局（初始化等） &lt;style&gt; html * { padding: 0; ...
左右固定宽，中间自适应（三栏布局）的方法
dou_xiaobao的博客
08-04 4612
左右固定宽，中间自适应（三栏布局）五种实现方法简述：定高100px，左右宽度均为200px，中间自适应。1、浮动—floatfloat介绍2、定位—positionposition介绍3、弹性盒子布局—flexposition介绍4、表格布局—tabletable介绍5、网格布局—gridgrid网格布局介绍总结 简述：定高100px，左右宽度均为200px，中间自适应。 公共代码块 *{padding: 0; margin: 0;} html, body {padding: 0; margin:
实现三栏布局（左右两边固定宽度，中间自适应）
LuckXinXin的博客
04-14 632
1）flex布局：父元素设置display:flex；左右两边分别设置flex:0 0 100px；width:100px;中间栏设置flex:1; 2）浮动布局：左右两边分别设置固定宽度，分别设置float:left float:right，在HTML中需要将中间栏和右边栏进行对调 3）绝对定位布局：左右两边设置宽度固定，position:absolute,top:0，然后分别设置：lef...
三栏布局（左右宽度固定，中间自适应）的实现方式及其延伸问题
qq_40816360的博客
02-19 612
全局CSS设定 html *{ padding: 0; margin: 0; } section { margin: 20px 0; } article &amp;amp;gt; div { min-height: 100px; } 浮动三栏布局 必须先写左右盒子再写中间盒子的html结构，设置左右两个盒子的宽高和浮动 &amp;amp;lt;section class=&amp;quot;layout float&amp;quot;&amp;
用html和css写一个三栏布局，要求左右宽度固定中间自适应。
最新发布
08-10
可以使用HTML和CSS来创建一个三栏布局，其中左右两列的宽度固定，而中间列的宽度自适应。 首先，我们需要使用HTML创建一个三列的容器，可以使用`<div>`标签来实现。代码如下： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值