浅谈CSS两栏、三栏自适应布局

最新推荐文章于 2022-04-06 14:52:32 发布
最新推荐文章于 2022-04-06 14:52:32 发布
阅读量752 收藏
点赞数 1
分类专栏： CSS 文章标签： CSS 两栏 三栏 自适应布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouziyu2011/article/details/53671013
版权

1、左侧固定宽度，右侧自适应

方法一：左侧设置float: left，右侧设置margin-left为左侧的宽度。  

注意：右侧不能设置float: left。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
            #left{    
                width:500px;    
                height:300px;    
                float:left;   
                background:#DDD;    
            }    
            #right{    
                height:300px;   
				margin-left:500px;
                background:#AAA;    
            }    
        </style>    
    </head>    
    <body>    
        <div id="left"></div>    
        <div id="right"></div>    
    </body>    
</html>

方法二：左侧设置float:left，右侧设置overflow:hidden。

利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
			#left{  
				width:500px;  
				height:300px;  
				float:left; 
				background:#DDD;  
			}  
			#right{  
				height:300px;   
				overflow:hidden;
				background:#AAA;  
			}  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="right"></div>  
    </body>  
</html>

方法三：左侧设置绝对定位，右侧设置margin-left为左边的宽度。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
			body{
				margin:0;
			}
			#left{  
				width:500px;  
				height:300px;  
				position:absolute;
				left:0px;
				top:0px;
				background:#DDD;  
			}  
			#right{  
				height:300px;   
				margin-left:500px;
				background:#AAA;  
			}  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="right"></div>  
    </body>  
</html>

方法四：父元素设置display:flex，右侧设置flex:1。

<!doctype html>    
<html>    
    <head>    
        <style type="text/css">    
			body{
				display:flex;
			}
            #left{    
                width:500px;    
                height:300px;  
                background:#DDD;    
            }    
            #right{    
                height:300px;   
				flex:1;
                background:#AAA;    
            }    
        </style>    
    </head>    
    <body>    
        <div id="left"></div>    
        <div id="right"></div>    
    </body>    
</html>

2、右侧固定宽度，左侧自适应

方法一：左侧设置margin-right为右侧的宽度，右侧设置float: right。  

<!doctype html>
<html>
	<head>
		<style type="text/css">
			#left{
				height:300px;
				margin-right:300px;
				background:#DDD;
			}
			#right{
				width:500px;
				height:300px;
				float:right;
				background:#AAA;
			}
		</style>
	</head>
	<body>
		<div id="right"></div>
		<div id="left"></div>
	</body>
</html>

注意：right要放在left的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，那么float的元素将被排斥到下一行。由于right是float的元素，而left是非float的元素，为避免right内容换行下移，需要把right放在left的前面。

方法二：左侧设置margin-right为右侧的宽度，右侧采用绝对定位，根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。

<!doctype html>
<html>
	<head>
		<style type="text/css">
			body{
				margin:0;
			}
			#left{
				height:300px;
				margin-right:500px;
				background:#DDD;
			}
			#right{
				width:500px;
				height:300px;
				position:absolute;
				top:0;
				right:0;
				background:#AAA;
		}
		</style>
	</head>
	<body>
		<div id="left"></div>
		<div id="right"></div>
	</body>
</html>

此时left和right的位置前后无关紧要。

注意：由于body默认有margin，对绝对定位的right设置top:0和right:0会导致左右侧之间有缝隙且不等高，为此，可统一设置body的margin为0。

方法三：左侧设置width为100%，float: left，margin-right为右侧的宽度的负值，右侧设置float: right。  

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            #left{  
                height:300px;   
                float:left;
				width:100%;
				margin-right:-500px;				
                background:#DDD;  
            }  
            #right{  
                width:500px;  
                height:300px;  
                float:right;  
                background:#AAA;  
            }  
        </style>  
    </head>  
    <body>   
        <div id="left"></div>  
        <div id="right"></div> 
    </body>  
</html>

方法四：父元素设置display:flex，左侧设置flex:1。

<!doctype html>      
<html>      
    <head>      
        <style type="text/css">      
            body{  
                display:flex;  
            }  
            #left{            
                height:300px;            
                flex:1;   
                background:#DDD;      
            }      
            #right{      
                width:500px;
                height:300px; 
                background:#AAA;      
            }      
        </style>      
    </head>      
    <body>      
        <div id="left"></div>      
        <div id="right"></div>      
    </body>      
</html>


2、左右固定宽度，中间自适应

方法一：左侧设置float:left，右侧设置float：right，中间设置margin-right为右侧的宽度，margin-left为左侧的宽度。

<!doctype html>
<html>
	<head>
		<style type="text/css">
			#left{
				width:200px;
				height:300px;
				float:left;
				background:#AAA;
			}
			#middle{
				height:300px;
				margin-left:200px;
				margin-right:500px;
				background:#DDD;
			}
			#right{
				width:500px;
				height:300px;
				float:right;
				background:#AAA;
			}
		</style>
	</head>
	<body>
		<div id="left"></div>
		<div id="right"></div>
		<div id="middle"></div>
	</body>
</html>

注意：right要放在middle的前面，否则会出现right右浮动后内容换行下移的问题。出现该问题的原因是非float的元素和float的元素在一起时，如果非float的元素在先，那么float的元素将被排斥到下一行。由于right是float的元素，而middle是非float的元素，为避免right内容换行下移，需要把right放在middle的前面。

若中间栏需要优先加载，请见：http://blog.csdn.net/zhouziyu2011/article/details/53857095

方法二：

中间设置margin-right为右侧的宽度，margin-left为左侧的宽度，左侧和右侧采用绝对定位，根据左侧div所需的left与浏览器窗口的顶端和左边的距离分别设置top和left，根据所需的右侧div与浏览器窗口的顶端和右边的距离分别设置top和right。

<!doctype html>
<html>
	<head>
		<style type="text/css">
			body{
				margin:0;
			}
			#left{
				width:200px;
				height:300px;
				position:absolute;
				left:0;
				top:0;
				background:#AAA;
			}
			#middle{
				height:300px;
				margin-left:200px;
				margin-right:500px;
				background:#DDD;
			}
			#right{
				width:500px;
				height:300px;
				float:right;
				position:absolute;
				right:0;
				top:0;
				background:#AAA;
			}
		</style>
	</head>
	<body>
		<div id="left"></div>
		<div id="middle"></div>
		<div id="right"></div>
	</body>
</html>

此时middle和right的位置前后无关紧要。

注意：由于body默认有margin，对绝对定位的left设置top:0和left:0，right设置top:0和right:0会导致左右侧和中间之间有缝隙且不等高，为此，可统一设置body的margin为0。

方法三：父元素设置display:flex，中间设置flex:1。

<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            body{  
                margin:0;  
				display:flex;
            }  
            #left{  
                width:200px;  
                height:300px;   
                background:#AAA;  
            }  
            #middle{  
                height:300px;  
				flex:1;
                background:#DDD;  
            }  
            #right{  
                width:500px;  
                height:300px;
                background:#AAA;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="left"></div>  
        <div id="middle"></div>  
        <div id="right"></div>  
    </body>  
</html>

筱葭
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现左右两边固定宽度，中间自适应的布局
weixin_38667820的博客
02-26 2441
废话不多说，上代码~ 方法一：float解决方案 &lt;section class="layout float"&gt; &lt;style&gt; .layout.float { width: 100%; height: 100px; } .layout.float .floatleft-center-right&gt;div { ...
html css实现左右两列固定宽度中间自适应效果
小利的博客
08-30 4391
实现有很多方法 浮动，固定定位，和css布局，这篇文章通过浮动和display:table-sell 两种方法来实现。1.float和margin css部分：.main{overflow:hidden;min-width:405px;} .left,.right,.center { color: #fff;word-wrap: break-word;min-height:500px;}
CSS(一) 经典布局（两边固定，中间自适应）的五种方式
lemaktub的博客
07-06 1780
两边固定，中间自适应 本篇总结五种思路实现方式， 圣杯布局 圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面 第一步：中间盒子100%，两边固定宽度，三个盒子依次上下 第二步：全员float：left， left与right 在第二行 脱离文档流 第三步：父级盒子 不要给宽度，margin：0 200px 留出 左右盒子位置 第四步：left 盒子 （1）margin-left:100% 将浮动元素向上移动一行文档流‘ （2）positi
自适应+两栏三栏布局
YiLin_Classics的博客
04-06 194
自适应宽度自适应高度自适应窗口的自适应动态计算宽度和高度如何实现两栏或者三栏布局 宽度自适应 概念：不设置宽度的话就是宽度自适应，通常情况下，默认不设置宽度，width的取值为auto 特点：默认占父元素/屏幕的一整行 因此，宽度自适应有三种情况： 1）width：auto即不设置宽度 2）width：100% 3）不给元素添加盒子模型 因为只要添加了盒子模型，元素实现的效果不一样。 width：auto auto+内边距 不会把盒子撑大 但是width：100%，100%+内边距=具体数值，比如
三列布局（左右宽度固定，中间自适应）的五种解决方案
mumacity
10-05 1385
三列布局，左右宽度固定，中间自适应。
浅谈CSS三栏布局的Ｎ种实现
09-27
【CSS三栏布局】在网页设计中是一种常见的布局方式，它将页面分为左、中、右三部分，其中左右两栏宽度固定，中间栏宽度自适应。本文将探讨几种实现CSS三栏布局的方法。 1. **绝对定位法** 在这种方法中，我们使用...
css实现两栏固定中间自适应的方法
09-22
主要介绍了css实现两栏固定中间自适应的方法，主要介绍了4种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能包含导航菜单，右侧放置辅助信息，中间则是主要内容。一个简单的实现方式是...
左右两栏布局右侧自适应+左右拖动改变两栏宽度
09-25
总结起来，这个例子展示了如何通过HTML、CSS和JavaScript实现一个具有自适应和拖动功能的左右两栏布局。它结合了基本的网页元素布局技巧和动态响应用户交互的JavaScript编程，对于想要学习网页布局和交互设计的...
6种三栏布局【中间自适应】｜包含双飞翼圣杯
02-18
1. float+margin 2. float+bfc 3. flex 4. 父相子绝 5. 圣杯布局 6. 双飞翼
CSS：实现自适应两栏布局的四种方法
KongKong_Rac的博客
09-25 2567
实现两栏布局的方法 1. 什么是BFC BFC：是一个独立的布局环境，其中的元素布局是不受外界的影响。 如果一个元素符合了成为BFC的条件，那么该元素就成为了一个隔离的独立容器，BFC的区域不会与外部浮动元素重叠，且在同一个BFC内的两个相邻块级元素的外边距会重叠，但不同 BFC外边距不会重叠；在计算BFC高度时，将它内部的浮动元素也包含在内。 2. 触发BFC的方法 (常用overflow:hidden;) float属性不为none position为absolute或fixed overflow的值
左右布局：左边定宽、右边自适应
初漾的博客
06-15 3506
转自： http://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html absolute + padding .example-1 { position: relative; height: 100px; width: 60%; padding-l
CSS两栏布局
eva_lu的博客
04-09 5670
CSS两栏布局 两栏布局（左侧宽度固定，右侧自适应），在学习的过程中总结了几种方法： 方法一：float+margin-left HTML部分 &lt;div class="left"&gt; &lt;h1&gt;Left Side&lt;/h1&gt; &lt;p&gt;我是左侧栏&lt;/p&gt; &lt;/div&gt; &lt;div class=
css实现等高布局 两栏自适应布局 三栏自适应布局
charlene0824的博客
04-22 4731
总结一下css常用的布局样式等高布局等高布局实现方法有很多 在这里总结常用的三种方法 padding补值法 该方法是通过负margin，同时将padding的值设为正的margin值实现的 具体实现方法如下：<div class="container"> <div class="item1">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负ma
css实现左右宽度固定，中间自适应及上下宽度固定，中间自适应的方法
Flora_SM的博客
12-01 864
文章目录一、左右宽度固定，中间宽度自适应1. 使用浮动布局2. 使用弹性布局3. 使用绝对定位二、实现上下宽度固定，中间自适应1. 绝对定位2. flex弹性布局 一、左右宽度固定，中间宽度自适应 1. 使用浮动布局 （1）左侧元素与右侧元素优先渲染，分别向左和向右浮动 （2）中间元素在文档流的最后渲染，则会自动插入到左右两列元素的中间 2. 使用弹性布局 父元素开启flex，中间设置flex：1 3. 使用绝对定位 二、实现上下宽度固定，中间自适应 1. 绝对定位 <head> &
左侧宽度固定，右侧宽度自适应
背着吉他的蝙蝠女侠的博客
11-01 559
实现左侧宽度固定，右侧宽度自适应的布局有很多，这里介绍几种方式： 方式一：左侧盒子宽度设置为100像素，并且设置为左浮动，右侧的盒子不设置宽度，只是设置个margin-left值就可以了，代码如下： .left {width: 100px; height: 20px; background: red; float: left;} .ri
三栏布局——左右固定，中间自适应
sinat_36841379的博客
07-12 426
之前有写过关于固定父布局，然后父布局内有是两列自适应。现在我们来看看三栏布局，当左右固定，中间的布适应是如何实现的。 这里将介绍两种方法，一种是使用margin值，另一种是使用position绝对定位。 首先我们来看第一种方法，下面是实现的代码： 无标题文档 body{ margin:0; padding:0; } .left{ width:200px; backgr
css布局两边固定中间自适应的四种方法
weixin_30642305的博客
04-29 796
第一种：左右侧采用浮动 中间采用margin-left 和 margin-right 方法。 代码如下： <div style="width:100%; margin:0 auto;"> <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</di...
css实现两边固定，中间自适应
杨前露的博客
12-12 1855
经常有需求，所以就总结一下，有需要的时候直接复制粘贴啦… 布局的原理是margin负值法。首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。 html: <div id = "wrap"> <di
css两行6个div布局自适应
最新发布
05-18
可以使用Flex布局来实现： ... ``` <div class="box"></div> ...通过给box元素设置宽度、外边距和高度来实现自适应布局。其中，calc()函数用于计算每个box元素的宽度，减去20px是为了给box元素之间留出一定的间隙。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值