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

最新推荐文章于 2022-03-17 21:23:36 发布
最新推荐文章于 2022-03-17 21:23:36 发布
阅读量472 收藏 2
点赞数
分类专栏： # CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HH18700418030/article/details/103468961
版权

（1）flex 实现：

<!DOCTYPE html>
<html>
<head>
	<title>实现两栏布局</title>
	<style> 
		*{
			padding:0;
			margin:0;
		}
		html,body{
			height: 100%;
		}
		.content{
			display: flex;
			display: -webkit-flex;
			width: 100%;
			height: 100%;
		}
		.left{
			flex: 0 1 300px;
			background: yellow;
		}
		.right{
			flex: 1;
			background: #ccc;
		}
		.content > div {
			height: 100%;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="left">这是第一个div</div>
		<div class="right">这是第二个div</div>
	</div>
</body>
</html>

（2）float + margin-left 实现：

		.content{
			width: 100%;
			height: 100%;
		}
		.left{
			width: 300px;
			float: left;
			background: yellow;
		}
		.right{
			margin-left: 300px;
			background-color: #ccc;
		}
		.content > div {
			height: 100%;
		}

（3）通过 calc 计算宽度实现：

		.content{
			width: 100%;
			height: 100%;
		}
		.left{
			width: 300px;
			float: left;
			background: yellow;
		}
		.right{
			width: calc(100%-300px);
			background-color: #ccc;
		}
		.content > div {
			height: 100%;
		}

（4）设置display: table 布局实现：

		.content{
			width: 100%;
			height: 100%;
			display: table;
		}
		.left{
			width: 300px;			
			background: yellow;
		}
		.right{			
			background-color: #ccc;
		}
		.content > div {
			height: 100%;
			display: table-cell;
		}

（5）通过设置 position：absolute 来实现：

		.content{
			width: 100%;
			height: 100%;
			position: relative;
		}
		.left{
			width: 300px;		
			left:0;
			top:0;	
			background: yellow;
		}
		.right{		
			left: 300;
			top: 0;	
			background-color: #ccc;
		}
		.content > div {
			height: 100%;
			position: absolute;
		}

（6）position+margin-left 实现：

		.content{
			width: 100%;
			height: 100%;
			position: relative;
		}
		.left{
			width: 300px;		
			left:0;
			top:0;	
			position: absolute;
			background: yellow;
		}
		.right{		
			margin-left: 300px;
			background-color: #ccc;
		}
		.content > div {
			height: 100%;
		}

（7）float 结合 BFC 实现：

		.content{
			width: 100%;
			height: 100%;
			overflow: auto;
		}
		.left{
			width: 300px;		
			float: left;
			background: yellow;
		}
		.right{		
			overflow: auto;
			background-color: #ccc;
		}
		.content > div {
			height: 100%;
		}

右侧盒子通过设置 overflow: auto; 形成了BFC。

以上例子皆可实现：两栏布局，左侧固定宽度，右侧自适应 的效果，页面效果如下：
在这里插入图片描述

＊且听风吟
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS创建两栏布局（左侧宽度固定，右侧宽度自适应）的几种方式
webchang的博客
04-03 1648
CSS创建两栏布局的方法（代码演示）
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
在CSS布局设计中，三栏布局是一种常见的网页结构，它通常包括左、中、右三部分，其中两侧的栏宽可变，而中间的栏宽固定。本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾...
css实现左侧定宽右侧自适应布局
xiaoxiaofly的博客
06-27 388
方式一，利用浮动+margin <style> .left{ background: red; float: left; width: 200px; height: 100px; margin-right: 20px; } .right{ backgr...
css实现两栏布局，左侧固定宽，右侧自适应的七种方法
KleyChan的博客
10-17 999
一个面试会问的问题，如何实现两个盒子，左侧固定宽度，右侧自适应。 下面是实现的其中方法： 1、利用 calc 计算宽度的方法 css代码如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&amp;gt;div{height: 100%;} #box1&amp;gt;div{float: left;} .left1{width: 100px;b...
两栏布局，左侧固定宽度，右侧自适应大小
青天诀的专栏
05-31 8430
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;
两栏布局(左侧固定宽度，右侧自适应)，五种实现方式
weixin_43026567的博客
10-11 2814
CSS两栏布局指的是在一个容器（container）中，其中一侧定宽布局，而另一侧自适应，自动填满剩余的空间。下面我们以“左侧固定宽度，右侧自适应”为例，采用五种不同的方式来实现此布局。 实现方式 float布局 定位布局 flex布局 table布局 grid网格布局 html代码 <section class="wrapper"> <div class="le...
css实现右侧固定宽度 左侧宽度自适应
09-24
【CSS布局实现】在网页设计中，经常需要创建一种布局模式，使得页面右侧部分具有固定宽度，而左侧部分根据浏览器窗口大小自适应调整宽度。这种布局模式在许多网站，包括博客园的一些默认主题中非常常见。通常，固定...
左侧固定宽度，右侧自适应宽度的CSS布局
10-30
一边固定宽度，另一边根据浏览器窗口大小自动缩放宽度是这种很常用的布局。特别是在BS项目的界面设计中，几乎都会用到。
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
在网页设计中，创建左右两栏布局并且支持用户通过拖动改变两栏宽度是一种常见的交互方式，这可以提供更灵活的界面体验。本示例主要涉及的技术点包括HTML基础、CSS布局以及JavaScript事件处理。 首先，HTML结构是...
两栏布局，左侧固定，右侧自适应的几种方法
weixin_45696837的博客
03-17 1601
两栏布局，左侧固定，右侧自适应 我总结了以下几种方法 左侧固定 + 右侧margin 左侧固定 + 父级padding 左侧浮动 + 右侧BFC 左侧浮动 + 右侧margin 先两个在一行 + 右侧calc 弹性布局 DOM结构 <div class="container"> <div class="left"></div> <div class="right"></div> </div> 初始样式 <st
横向两列布局（左列固定，右列自适应）的4种CSS实现方式
09-27
主要介绍了横向两列布局，即左列固定，右列自适应的4种CSS实现方式，感兴趣的小伙伴们可以参考一下
css实现左侧固定右侧自适应的布局方式
09-22
主要介绍了css实现左侧固定右侧自适应的布局方式，详细的介绍了3种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
左侧导航菜单div+css样式
11-03
左侧导航菜单div+css样式，样式非常好看，适合faq页面使用，分层级的可折叠菜单
css实现两栏布局，左侧固定宽，右侧自适应的方法
ciguli3169的博客
08-01 166
利用calc计算宽度的方法 css代码如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box1>div{float: left;} .left1{wi...
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
weixin_30522095的博客
04-10 760
css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 原文:css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法） 1.应用场景 左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应 ...
css布局 之 左侧宽度固定，右侧自适应两栏布局
Dark_programmer的博客
04-04 353
布局代码如下，文章统一使用布局 <body> <div class="wrapper"> <div class="left">左侧宽度固定</div> <div class="right">右侧宽度自适应</div> </div> </body> 方法一、 左侧...
两栏布局——右侧宽度固定左侧自适应
qq_32447287的博客
09-29 316
css实现左栏固定右栏自适应，高度自适应的布局
aigenglong0649的博客
11-14 225
　　收集css中的基础知识，所以这并不是什么新鲜的技术，只是作为备忘~本文的内容如题所示，是一个简单的布局，用于左右两栏布局的页面，左侧是固定宽度，右侧占据剩余的宽度。在垂直方向，始终以高度最大的一栏为基准，例如，随着右侧面板中动态添加内容高度增加，左侧也跟着增加，这样不会产生的难看的像这样的情况： 　　实现该布局的代码如下： <style type="text/css...
flex左边宽度固定右边自适应怎么写
最新发布
06-10
可以使用 flex 布局中的 flex-grow 属性来实现左边固定宽度，右边自适应的效果。具体做法如下： ... ... 左边固定宽度 右边自适应宽度 ...CSS 代码： ...这样就可以实现左边宽度固定，右边自适应的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值