css两栏布局,左边定宽,右边自适应

最新推荐文章于 2022-05-31 09:16:30 发布
最新推荐文章于 2022-05-31 09:16:30 发布
阅读量502 收藏
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cherish_XYT/article/details/81978614
版权

左右两栏布局

HTML部分

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

CSS部分

html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

1. 使用flex布局

        .box{
            width: 100%;
            height: 100%;
            display: flex;
        }
        .left{
            width: 200px;
            background: red;
        }
        .right{
            flex: 1;
            background: yellowgreen;
        }

2. 使用float布局

        .box{
            width: 100%;
            height: 100%;
        }
        .left{
            width: 200px;
            height: 100%;
            background: red;
            float: left;
        }
        .right{
            padding-left: 200px;
            height: 100%;
            background: yellowgreen;
        }

3. 使用绝对定位

        .box{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .left{
            width: 200px;
            height: 100%;
            background: red;
            position:absolute;
            left: 0;

        }
        .right{
            height: 100%;
            background: yellowgreen;
            margin-left: 200px;
        }

上下布局,上部分定宽,下面部分高度自适应

HTML部分

<body>
    <div class="box">
        <header></header>
        <main></main>
    </div>
</body>

CSS部分

        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box{
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        header{
            width: 100%;
            height: 100px;
            background: #333;
        }
        main{
            width: 100%;
            height: 100%;
            background: yellowgreen;
            position: absolute;
            top: 100px;
            left: 0;
            right: 0;
            bottom: 0;
        }
Cherish_XYT
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常规的布局方式之两栏布局--左边定宽，右边自适应
Yannnnnm的博客
07-25 748
在日常的例子中我们经常可以看到如下的布局方式: 左右为两栏式布局，那么我们怎么实现他呢？前辈们也写了很多方法，下面我自己总结一下我自己一般会用到的方法： 首先老规矩，先放例子： 当我们不做任何处理的时候： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
CSS两栏布局，左边定宽，右边自适应怎么实现？
那一日面朝大海的博客
12-29 1276
这是页面布局的一个经典问题，总结下几种可行性的方法。 左边布局定好宽度，右边布局实现自适应。 方法一：可以用用flex布局，给父容器设置 display：flex；Right部分设置 flex：1 ；left只是之前定好的宽度； 布局 .left{  width: 300px;  height: 200px;  background-color: blue; } .b
两栏布局，左边固定，右边自适应解决方案
qq_38890813的博客
11-12 470
方案一: (浮动+margin-left)左边浮动，右边margin-left:width， 俩个div即可 浮动，元素脱离文档流，不占据空间，后面的元素可以排到最左侧，所以 margin-left CSS: .left{float:left;width:200px;background-color: red;} .right{margin-left:200px;backg...
实现一个两栏布局，左边固定宽度，右边自适应？
weixin_42220039的博客
10-13 668
1、利用 calc 计算宽度的方法 css代码如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&gt;div{height: 100%;} #box1&gt;div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;...
【JS提升】实现两栏与三栏布局的方法
小管打天下的博客
07-28 608
一、两栏布局 （1）两栏布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
CSS实现两栏布局，左边固定，右边自适应的4种方法
11-21
1. float+overflow:hidden 这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。由于设置 overflow:hidden 并不会触发 IE6-浏览器的 haslayout 属性，所以需要设置 zoom:1 来兼容 IE6-浏览器。...
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是实现布局的基础。在给定的代码中，可以看到三个`<div>`元素，分别用于左栏(`#left`)、中间拖动区域(`#middle`)和右栏(`#...
css实现六种自适应两栏布局方式
01-18
<body> <div class=left></div> <div class=right></div...方法一：flex布局 .wrapper{ display:flex; } .left{ width:200px; height:400px; background:black; } .right{ flex:1; height:400px; b
Css左右定宽三栏布局.zip
08-04
"Css左右定宽三栏布局"是一种常见的网页设计模式，它旨在创建一个包含三个区域的页面，其中左右两栏宽度固定，中间栏宽度自适应，以满足不同内容需求和屏幕尺寸。这种布局常用于网站的主内容区，为用户提供清晰的...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
【js学习笔记四十五】实现两栏布局的第一种方式
geyaoisnice的博客
05-31 110
目录 前言 导语 代码部分 运行结果 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 导语 实现两栏布局第一种方式 代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta char...
css实现两栏经典布局
x1037490413的博客
09-08 241
1.定位absolute,给灰色区域让位置 2.让一个元素把自身的元素让出来(margin-right),不要压住另一个元素 3.注意:两个div不能交换顺序,如果灰色div先出生,粉色区域再出生.粉色区域调完position之后,*虽然定义了absolute,脱离原来位置,但是出身的位置原本就是第二行,不会再到第一行去了灰色区域没有让给它位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
两栏布局，左侧固定宽度，右侧自适应大小
青天诀的专栏
05-31 8433
html代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS布局</title> </head> <body> <div id="left"></div> <div id="right"></div> </body> </html>第一种方式*{margin:0;
两栏自适应布局6种方案（一侧定宽，一侧自适应宽度）
莫小猪的菜鸟进阶路
01-03 2883
最近看面试题，看到很多次类似的题目，左侧定宽右侧自适应， 或则右侧定宽左侧自适应。网上众说纷纭，示例很多没有原理讲解。所以借助自己复习总结。希望能给初学者，自学者一些帮助吧。共勉。。。 目前所知的主要5种方式 方法一： 固定宽度区域浮动，自适应区域设置margin(值 = 固定的宽) 原理：float的固定宽度区域脱离文档流。自适应区域默认占满父元素宽度。通过设置margin(值 = 固定的宽) ...
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
热门推荐
LonelySnow的博客
04-08 2万+
1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决，需要攻克以下两点： 1）让两个div并排到一行 2）让一个div宽度固定，另个div占据剩下宽度的空间 关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute； ...
使用mui实现横向滚动的tab标签
lijianfengxiaoli的博客
11-03 1万+
第一步:引入mui.min.css和mui.min.js文件 第二部:在html文档中添加如下代码 推荐 苏州行 北京 游记 影评
两栏布局
weixin_43699303的博客
01-16 312
源代码如下：
css 关于两栏布局，左边固定，右边自适应
weixin_30315435的博客
08-31 249
好几个星期都没写博客了，最近不忙也不闲，稀里糊涂过了两个星期，之前几个月内天天坚持签到。最近也没签到。哈哈，说正事。 今天做东钿互金平台后台页面，昨天做了一个登录页面，业偶碰到了一个难题。等下也要把它写出来，先说今天的吧。两栏布局，左边固定，右边自适应 百度了一下，使用了http://www.zhangxinxu.com/wordpress/2010/03/纯css实现侧边栏分栏高度自动相等/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值