CSS 实现左侧固定，右侧自适应两栏布局

最新推荐文章于 2023-12-25 10:45:06 发布
最新推荐文章于 2023-12-25 10:45:06 发布
阅读量918 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TWFKXP/article/details/80580745
版权
本文介绍了三种CSS布局技巧，包括浮动元素加margin-left、绝对定位元素加margin-left以及双浮动结合calc方法，实现左侧栏固定宽度，右侧栏自适应宽度的页面布局。
摘要由CSDN通过智能技术生成 
<style>
    .outer {
        overflow: hidden;
        height:150px;      
        border: 1px solid red; 
    }

    .fix {
        width: 200px;
        height: 150px;
        background: #BCE8F1;  

    }

    .free {
        height: 100px;
        background: #F0AD4E
最低0.47元/天 解锁文章
丸子嘻嘻
关注
实现左侧固定宽度, 右侧自适应的两栏布局的八种方案
技术无止境，人生仍探索。
07-23 4927
HTML <!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" /> &lt
css实现两栏布局
weixin_45732235的博客
03-25 572
✨实现效果 ✨具体代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>两列布局</title> <style type="text/css"> /* 根元素设置为border-box */ :root { box-sizing: border-box; } /* 告诉其他所有元素和伪元素继承其盒模型 */
css学习笔记7（浮动）
最新发布
qq_42236791的博客
12-25 1763
​ 在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
两列自适应布局
weixin_30478757的博客
11-05 139
随便拿一个搜索引擎搜索一下“两列自适应布局”，都能得到很多种实现方法，这篇文章的重点是这些方法的底层逻辑是什么，他们是怎么得来的。 分析： 需要满足三个要求： ①两个盒子在同一行 ②右边的盒子需要占满剩下的空间 ③两个盒子不能重叠 这三个条件又分别有很多种实现方法（不考虑绝对定位）： 组合起来，会有很多种实现方式。 方法： <div class="left">...
css 两栏布局的实现
A12536365214的博客
10-25 820
两栏布局是一种常见的网页设计模式，它将页面分为两个主要区域：主内容区域和侧边栏。这种布局方式不仅能够提供清晰的内容结构，还能够提高页面的可读性和用户体验。随着Web技术的发展，实现两栏布局的方法也越来越多样化。本文将详细介绍几种常见的两栏布局实现方法，包括浮动布局、Flex布局和Grid布局，并提供代码示例和详细解释，帮助开发者更好地理解和运用这些布局技术。
CSS实现两栏布局
syx_12的博客
08-17 238
两栏布局：左边固定，右边自适应。首先就会想到用flex布局。 方法1：flex布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini
css实现左侧固定右侧自适应的布局方式
09-22
在前端开发中，实现左侧固定宽度、右侧自适应宽度的布局是一种常见的需求，这样的布局能够适应不同屏幕大小，提高页面布局的灵活性和用户体验。以下将介绍三种使用CSS来实现这种布局的方式。 ### 浮动布局（Float ...
CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
12-13
左边固定，右边自适应布局，这个第一点应该来说是非常的容易，实现的方法也是相当的多，那么就可以说第一条要求已不是什么要求了； 左右两列等高布局，这一点相对来说要复杂一些，不过你要是了解了怎么实现等高布局...
CSS实现左侧固定右侧自适应布局及等高布局的代码示例
"这篇文章主要介绍了如何使用CSS实现左侧固定宽度，右侧自适应宽度的布局，同时满足等高布局和最小高度的要求，且不依赖JavaScript或CSS行为。文章提供了两种实现方式，分别是浮动布局和Flexbox布局。" 在网页设计...
CSS两栏布局的实现
weixin_43276913的博客
04-28 282
一、浮动 二、flex布局 三、绝对定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
css两栏布局
Dear_pandy的博客
08-09 395
将左元素设置为固定宽度，并且向左浮动，右元素宽度设置为auto，margin-left为左元素宽度。左侧固定宽，右侧flex：1。
CSS两栏布局
weixin_45732235的博客
03-11 353
左列定宽，右列自适应 方法1.浮动+margin实现 <div class="container"> <div class="left"></div> <div class="right"></div> </div> .left { width: 300px; height: 50vh; background-color: yellowgreen; float
用CSS实现布局（两栏布局，多栏布局）
tasty
10-06 1516
在网页上的布局比较经典的是两栏布局和三栏布局。下面简单总结自己对这两种布局的实现过程。 两栏布局 两栏布局是主内容区为主，左（右）侧有一栏，代码如下： style> #header, #footer{ height: 100px; background: red; }
【CSS】实现两栏布局的方式
weixin_47750287的博客
05-04 4173
【CSS】实现两栏布局的方式 一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。两栏布局的具体实现有以下几种方式： ① 利用浮动 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。 将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。 .container { height: 100px; } .left { float: left; width: 200px; height: 100px; background:
CSS实现两栏结构自定义布局
陈皮球的博客
08-13 395
来公司实习的时候安排了一些工作，其中有实现两栏布局和三栏布局。 html代码中一个innerFrame就是一栏。 要实现的效果图： HTML： <div class="outterFrame"> <div class="innerFrame"> <div class="headTitle"><span>选择角色</span></div> <div> <c
css实现两栏经典布局
x1037490413的博客
09-08 268
1.定位absolute,给灰色区域让位置 2.让一个元素把自身的元素让出来(margin-right),不要压住另一个元素 3.注意:两个div不能交换顺序,如果灰色div先出生,粉色区域再出生.粉色区域调完position之后,*虽然定义了absolute,脱离原来位置,但是出身的位置原本就是第二行,不会再到第一行去了灰色区域没有让给它位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
css常用布局 两栏、三栏 布局
Banality_human_workers的博客
08-28 279
我们在做pc端页面的时候、经常会用到这种布局、即两栏、 三栏布局。 如图所示： 这两种经典布局相信很多人都用过把。 现在分享一下我的布局方案吧（每个人布局风格不同 自然想法就不一样了。） 两栏布局： 1、左（右）侧固定宽度：中间部分使用margin-left或margin- right（默认为auto）使之铺满右侧部分。 <div class="parent"> <div class="left">111</div> <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值