精华内容
下载资源
问答
  • 宽度自适应三栏的布局方式
    2022-03-08 15:42:23

    自适应两栏布局

    • 自适应两栏布局

      所谓自适应即是“随屏幕分辨率改变而改变”,而自适应两栏布局即是“一栏固定宽度,一栏不设具体宽度自适应屏幕宽度

    • 1、BFC实现两栏布局

      BFC(Block formatting context)块级格式化上下文。大白话的意思是:BFC是个封闭大盒子,盒子里的元素无论在里面干什么,都不会影响到盒子外面。
      
    • BFC的布局规则

      一、处于BFC内盒子会垂直方向放置(类似html根元素内放块级元素,html根元素内本身也是BFC)
      二、盒子box垂直方向的距离由(margin:距离值)决定。但在同一bfc内部的两个相邻盒子margin值会发生重叠,所谓重叠就是按照哪个盒子设置的最大margin值设置(给子元素设置不同bfc就可解决重叠)
      三、每个元素的margin box的左边, 与包含块border box的左边相接触。BFC的区域不会与float box重叠。(例如不在bfc内的两个相邻盒子设置左边设置float:left,而右边盒子不设,两个盒子就会脱离文档流,右边盒子就会跑到左边盒子进行重叠。而触发右边盒子bfc就不会重叠,这也是自适应两栏布局应用)
      四、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
      五、计算bfc的高度时,浮动元素也参与计算(子元素浮动会脱离文档流,触发bfc能让浮动元素宽高参与计算)
      
    • BFC触发条件

      1、根元素html默认就是BFC
      2、float属性不为none
      3、position为absolute或fixed
      4、display为inline-block, table-cell, table-caption, flex, inline-flex
      5、overflow不为visible 
      
    • BFC的应用

      1、自适应两栏布局 
      2、清除内部浮动
      3、防止margin上下重叠
      
    • BFC具体应用于两栏布局

      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title></title>
      		<style type="text/css">
      		*{
      			margin: 0; padding: 0;
      		}
      			#app{
      				width: 400px; height: 400px;
      				background-color: #55ff00;
      				/* overflow: hidden; */
      			}
      			.box1{
                     /* 一边固定宽度(设置在左边或右边按需求即可) */
      				width: 100px; height: 100px;
      				float: left;
      				margin-right: 50px;
      				background-color: #55ffff;
      			}
      			.box2{
                       /* 一边不设宽度(不设默认为父元素100%) */
      				height: 150px;
      				/* 触发BFC */
      				overflow: hidden;
      				background-color: #ffff7f;
      			}
      		</style>
      	</head>
      	<body>
      		<div id="app">
      			<div class="box1">
      				盒子一
      			</div>
      			<div class="box2">
      				盒子二
      			</div>
      		</div>
      	</body>
      </html>
      
    • 2、flex布局实现两栏布局

      flex容器:采用flex布局的元素的父元素(display: flex;)
      flex项目:采用flex布局的元素的子元素(即在父元素盒子里的子元素盒子)
      容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
      主轴的开始位置(与边框交叉点)称为main start  //默认从左到右,相对的,可改
      主轴的结束位置(与边框交叉点)称为main end //同上
      交叉轴的开始位置(与边框交叉点)称为cross start
      交叉轴的结束位置(与边框交叉点)称为cross end
      主轴如按默认可假设X轴、交叉轴可假设Y轴。但这些都是相对的,还是得看具体设置)
      项目默认沿着主轴排列(主轴是相对的)。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
      
      flexbox布局功能主要具有以下几点:
      1. 屏幕和浏览器窗口大小发生变化也可以灵活调整布局
      2. 指定伸缩项目沿着主轴或侧轴按比例分配额外空间,从而调增伸缩项目的大小
      3. 指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间
      4. 指定如何将垂直于元素布局轴的额外空间分布到该元素的周围
      5. 控制元素在页面上的布局方向
      6. 按照不同于标准流所指定的排序方式对屏幕上的元素重新排序

      flex容器属性

      display:flex/inline-flex;  //设置为flex布局,而float、clear、vertical-align属性将失效
      
      1、flex-direction属性决定主轴的方向(即是flex项目元素盒子的排列方向):
      flex-direction: row(从左到右)| row-reverse(从右到左)| column(从上到下) | column(从下到上)
      
      2、flex-wrap属性,定义flex项目子元素是否换行显示
      flex-wrap:nowrap; //不换行 默认值:flex项目超出或不超都不换行
      flex-wrap:wrap; //换行 flex项目超出就会换行
      flex-wrap:wrap-reverse: 换行方向 //主轴水平时,上下反向,主轴垂直时,左右反向
      
      3、 flex-flow :是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap;
      4、justify-content属性 定义了项目在主轴上的对齐方式
      justify-content: 
       flex-start  伸缩项目向一行的起始位置靠齐;
       flex-end   伸缩项目向一行的结束位置靠齐;
       center     伸缩项目向一行的中间位置靠齐;
       space-between  伸缩项目会平均的分布在行里;
       space-around;  伸缩项目会平均的分布在行里,两端保留一半的空间;
       space-evenly:把剩余的空间进行均分
      
      5、align-items属性定义项目在交叉轴上如何对齐
      align-items:
      	flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;
      	flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;
      	center:伸缩项目的外边距盒 在该行的侧轴上居中放置;
      	baseline:伸缩项目根据伸缩项目的基线对齐;
      	(有内容时,按照文字的基线对齐,没有内容时会按元素的基线对齐)
      	stretch:伸缩项目拉伸填充整个伸缩容器。(默认值)
      	注:stretch是把它的高度进行拉伸,确保没有高度的情况下,如果有高度会跟高度走,没有高度会进行拉伸,不定议高度是默认值拉伸
      
      6、align-content属性定义多根轴线的对齐方式。对于单行子元素,该属性不起作用。
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
      align-content在侧轴上执行样式的时候,会把默认的间距给合并。对于单行子元素,该属性不起作用
      align-content 定义多个伸缩行的对齐方式,往往要与换行同时应用(换行时才用)
      flex-start:各行向伸缩容器的起点位置堆叠;
      flex-end:各行向伸缩容器的结束位置堆叠;
      center:各行向伸缩容器的中间位置堆叠;
      space-between:各行在伸缩容器中平均分布;
      space-around:各行在伸缩容器中平均分布,两端保留一半的空间;
      stretch:各行将伸展以占用额外空间。(默认值)
      

      flex项目属性

      1、align-self属性
      Internet Explorer 和 Safari 浏览器不支持 align-self 属性
      说明:
      	align-self 属性规定灵活容器内被选中项目的对齐方式。
      	注意:align-self 属性可重写灵活容器的 align-items 属性。
      	属性值
      		auto 		默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
      		Stretch		元素被拉伸以适应容器。
      		Center		元素位于容器的中心。
      		flex-start		元素位于容器的开头。
      		flex-end		元素位于容器的结尾。
      

      2、order

      说明:
      	number排序优先级,数字越大越往后排,默认为0,支持负数。
      

      3、flex

      说明:
      	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
      	详细属性值:
      		缩写「flex: 1」, 则其计算值为「1 1 0%」
      		缩写「flex: auto」, 则其计算值为「1 1 auto」
      		flex: none」, 则其计算值为「0 0 auto」
      		flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值
      

      4、flex-xxx

      flex-grow
      	 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
      如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
      
      //!!!flex-shrink:解决flex项目缩小问题
      flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
         如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
      负值对该属性无效。
      flex-basis=width(height)属性
          flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
      	项目的长度 分配多余空间之前,项目占据的主轴空间(Flex元素在主轴方向的初始大小,如果主轴是x轴,相当于width,如果主轴是Y,相当于height)
      	
      flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。
      
      
    • flex具体应用于两栏布局

    • <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title></title>
      		<style type="text/css">
      			* {
      				margin: 0;
      				padding: 0;
      			}
      
      			#app {
      				width: 400px;
      				height: 400px;
      				background-color: #55ff00;
                      /*转换布局方式*/
      				display: flex; 
      			}
      
      			.box1 {
      				width: 100px;
      				height: 100px;
      				background-color: #55ffff;
      			}
      
      			.box2 {
      				height: 150px;
      				overflow: hidden;
      				background-color: #ffff7f;
                      /*让其将剩余空间铺满*/
      				flex: 1;
      			}
      		</style>
      	</head>
      	<body>
      		<div id="app">
      			<div class="box1">
      				盒子一
      			</div>
      			<div class="box2">
      				盒子二
      			</div>
      		</div>
      	</body>
      </html>
      
    • 3、定位实现两栏布局

      前提:承载两栏的父元素要设置定位为相对定位。(子绝对定位父相对定位)

      原理:固定宽度的一栏设定具体的top、left(定位而已),自适应一栏使用外边距跟固定宽度一栏拉开

      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title></title>
      		<style type="text/css">
      			* {
      				padding: 0;
      				margin: 0;
      			}
      
      			body {
      				position: relative;
      			}
      
      			#left {
      				width: 300px;
      				height: 400px;
      				background: yellow;
      				/* 定位实现两栏布局关键 */
      				position: absolute;
      				top: 0;
      				left: 0;
      				/* margin-right:300px ; */
        
      			}
      
      			#right {
      				height: 500px;
      				background-color: blue;
      				/* 外边距拉开距离 */
      				margin-left: 300px;
      			}
      		</style>
      	</head>
      	<body>
      		<div id="left">
      
      		</div>
      		<div id="right">
      
      		</div>
      	</body>
      </html>
      
      

    三栏布局-中间自适应

    • 浮动实现三栏布局

      原理:左边左浮动,中间右浮动,最后不设浮动
      如果自适应盒子在中间则无法自适应宽度受到内容影响,自适应盒子要放在最右边并且不设置浮动和宽度

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				padding: 0; margin: 0;
    			}
    			body{
    				overflow: hidden;
    			}
    			.left {
    				width: 100px;
    				height: 300px;
    				background: #0000FF;
    				/* 三栏布局关键 */
    				float: left;
    			}
    
    			.center {
    				height: 300px;width: 100px;
    				background: #ffff00;
    				/* 三栏布局关键 */
    				float: right;
    			}
    
    			.right {
    				height: 500px;
    				background: #aaff00;
    				/* 三栏布局关键 */
    				overflow: hidden;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="left">
    
    		</div>
    		<div class="center">
    
    		</div>
    		<div class="right">
    
    		</div>
    	</body>
    </html>
    
    • Flex实现三栏布局

      实现:左右设定固定宽度,中间使用flex:1 让其自动适应铺满。

      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title></title>
      		<style type="text/css">
      			*{
      				padding: 0; margin: 0;
      			}
      			body{
      				/* Flex实现三栏布局关键 */
      				display: flex;
      			}
      			.left {
      				width: 100px;
      				height: 300px;
      				background: #0000FF;
      				
      			}
      			
      			.center {
      				height: 500px;
      				background: #ffff00;
      				/* Flex实现三栏布局关键 */
      				flex: 1;
      			}
      			
      			.right {
      				height: 300px; width: 100px;
      				background: #aaff00;
      			}
      		</style>
      	</head>
      	<body>
      		<div class="left">
      		
      		</div>
      		<div class="center">
      		
      		</div>
      		<div class="right">
      		
      		</div>
      	</body>
      </html>
      
      
    • 定位实现三栏布局

      实现:左边设置绝对定位(top:0;left:0),中间设置左右边距,右边设置左边设置绝对定位(top:0;right:0)

      原理:利用绝对定位让左右元素靠近左右边框,而中间就不设宽度自适应但是得设置外边距和左右元素拉开距离

      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title></title>
      		<style type="text/css">
      			*{
      				padding: 0; margin: 0;
      			}
      			body{
      				/* 定位实现三栏布局关键 */
      				position: relative;
      			}
      			.left {
      				width: 100px;
      				height: 300px;
      				background: #0000FF;
      				/* 实现三栏布局关键 */
      				position: absolute;
      				top: 0;
      				left: 0;
      			}
      			
      			.center {
      				height: 500px;
      				background: #ffff00;
      				/* 实现三栏布局关键 */
      				margin: 0 100px;
      			}
      			
      			.right {
      				height: 300px; width: 100px;
      				background: #aaff00;
      				/* 实现三栏布局关键 */
      				top: 0;
      				right: 0;
      				position: absolute;
      			}
      		</style>
      	</head>
      	<body>
      		<div class="left">
      		
      		</div>
      		<div class="center">
      		
      		</div>
      		<div class="right">
      		
      		</div>
      	</body>
      </html>
      
      
    更多相关内容
  • 下面和大家一起探讨和学习了一种用div+css进行的三列(三栏布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为以前只是碰到过,左右两列固定而中间自适应的运用
  • 以前做三栏布局时,最常用最简单的方法可能就是:采用float+margin来实现,而CSS3的时代,我们可以有另一种比较“时尚”的方法,就是css3中的盒子模型,代码如下:HTML>CSS3三栏布局.container{display:-webkit-...

    以前做三栏布局时,最常用最简单的方法可能就是:采用float+margin来实现,而CSS3的时代,我们可以有另一种比较“时尚”的方法,就是css3中的盒子模型,代码如下:HTML>

    CSS3三栏布局

    .container{

    display:-webkit-box;

    display:-moz-box;

    }

    div:not(.container){

    -webkit-border-radius:5px;

    -moz-border-radius:5px;

    border-radius:5px;

    background:#999;

    border:#00C 2px solid;

    }

    #left,#right{

    width:200px;

    -webkit-box-sizing:border-box;

    -moz-box-sizing:border-box;

    padding:20px;

    }

    #middle{

    padding:20px;

    -webkit-box-flex:1;

    -moz-box-flex:1;

    -webkit-box-ordinal-group:2;

    -moz-box-ordinal-group:2;

    margin:0 5px;

    }

    #right{

    -webkit-box-ordinal-group:2;

    -moz-box-ordinal-group:2;

    }

    Css3三栏布局

    middle
    left
    right

    效果如下:

    6401ab928b8f7c3ba688fcfc0fbc1e9e.png

    总结:这里面主要用到了box-flex属性,这个属性主要是让子容器相对于父容器将宽度按一定的规则划分,如三个子容器分别设置box-flex的值为1,2,3则,三个子容器将按照1:2:3的比例划分宽度。

    当然,父容器必须设置成为盒子模型才可以看到效果,比如display:-webkit-box;display:-moz-box;

    然而,如果你直接运行上面的代码,chrome里面是没有问题,但是到了FireFox,则变成下面的样子了:

    1f62d47950f2abb2aef0c8d0107c1e2c.png

    难道这是一个FireFox的Bug?本来左右两边的宽度固定,而中间的却没有自适应宽度。经过与《html5 与css3权威指南》作者的交流,才知道,之所以出现这样的情况是因为没有设置父容器的宽度,当我们给父容器加上width:100%就可以了。。。在此感谢《html5 与css3权威指南》作者……

    展开全文
  • 百度面试碰到的题,要实现如下布局效果 其中中间这紫色的一的大小随字体的多少而变宽/变窄,且多出的文字自动省略为[…],右边的绿色要紧紧连着紫色这一。 主要对紫色这一的操作为: 1.flex: 0 1 auto ...
  • 多种方法实现自适应三栏布局       网页开发中,经常会遇到左右宽度固定,中间宽度自适应的三栏布局,这里将介绍三种常用的方法(对页面渲染顺序无要求,如要求优先渲染中间部分,...

    多种方法实现自适应三栏布局

          网页开发中,经常会遇到左右宽度固定,中间宽度自适应的三栏布局,这里将介绍三种常用的方法(对页面渲染顺序无要求,如要求优先渲染中间部分,移步圣杯布局和双飞翼布局)

    方法一:

    html结构:

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

          首先提起左右依次排列,我们可以首先想到浮动,于是统统左浮动。为了方便观察,我们加上背景颜色

    		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
    		.center{float: left;height: 300px;background-color: #DC143C;}
    		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;}
    

    在这里插入图片描述
          可以看到,中间部分并没有自适应,我们可以用一个css3新增的属性cale。相当于一个计算器,将左右两侧宽度减掉便是中间的宽度。

    .center{float: left;height: 300px;background-color: #DC143C;width:calc(100% - 500px);}
    

          这里要注意减号前后要有空格。
    在这里插入图片描述
    缺点:calc为c3新增加的,兼容不是很好。

    方法二:

          上面方法讲了用浮动,这次我们试试左右浮动,中间不浮动试试,方法二的html结构同方法一。

    		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
    		.center{height: 300px;background-color: #DC143C;}
    		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;}
    

          这样会导致一个问题,左边浮动脱离文档流势必会导致中间部分上去,右边浮动被迫换行。
    在这里插入图片描述
          我们可以用定位讲右边浮动移动到浏览器右上角,然后利用bfc的一个特性解决中间部分和左边部分重叠的问题。即bfc区域不会与浮动盒子发生重叠。用overflow:hidden;即可,bfc的其他触发方式这里就暂不赘述了。

    		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
    		.center{height: 300px;background-color: #DC143C;overflow: hidden;}
    		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;
    				position:absolute;right: 0;top: 0;}
    

    在这里插入图片描述
          然后现在只需要给中间区域添加声明margin-right:300px;就可以实现了(此时右边部分绝对定位脱离文档流,并不会被margin-right影响。)
    缺点:比较麻烦,但是兼容性比方法一强。

    方法三:

          刚才的两种方法html结构都是左中右依次排列,第三种方法换一下排列顺序。
    html结构:

    		<div class="box">
    			<div class="left">我是左边的部分</div>
    			<div class="right">我是右边的部分</div>
    			<div class="center">我是中间的部分</div>
    		</div>
    

          结构变成了左右中。如果我们给左边元素左浮动,右边元素右浮动,那么中间自然而然的就会上去,那么现在只要将中间区域变成bfc,页面就会变成我们想要的三栏布局。

    			.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
    			.center{height: 300px;background-color: #DC143C;overflow: hidden;}
    			.right{float: right;width: 300px;height: 200px;background-color: #FFFF00;}
    

    在这里插入图片描述
    优点:方法简单,容易实现;
    缺点:需要改变页面布局,变为左右中布局。

    展开全文
  • 在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高 PS: 文末有彩蛋 两栏布局 两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满, 比如Ant ...

    图片

    一、背景

    在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高

    PS: 文末有彩蛋

    两栏布局

    两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满,

    比如 Ant Design 文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器

    这里称宽度较小的列父元素为次要布局容器,宽度较大的列父元素为主要布局容器

    图片

    这种布局适用于内容上具有明显主次关系的网页

    三栏布局

    三栏布局按照左中右的顺序进行排列,通常中间列最宽,左右两列次之

    大家最常见的就是github

    图片

    二、双栏布局

    双栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在

    实现思路也非常的简单:

    • 使用 float 左浮左边栏

    • 右边模块使用 margin-left 撑出内容块做内容展示

    • 为父级元素添加BFC,防止下方元素飞到上方内容

    代码如下:

    <style>
        .box{
            overflow: hidden; 添加BFC
        }
        .left {
            float: left;
            width: 200px;
            background-color: gray;
            height: 400px;
        }
        .right {
            margin-left: 210px;
            background-color: lightgray;
            height: 200px;
        }
    </style>
    <div class="box">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    

    还有一种更为简单的使用则是采取:flex弹性布局

    flex弹性布局

    <style>
        .box{
            display: flex;
        }
        .left {
            width: 100px;
        }
        .right {
            flex: 1;
        }
    </style>
    <div class="box">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    

    flex可以说是最好的方案了,代码少,使用简单

    注意的是,flex容器的一个默认属性值:align-items: stretch;

    这个属性导致了列等高的效果。为了让两个盒子高度自动,需要设置: align-items: flex-start

    三、三栏布局

    实现三栏布局中间自适应的布局方式有:

    • 两边使用 float,中间使用 margin

    • 两边使用 absolute,中间使用 margin

    • 两边使用 float 和负 margin

    • display: table 实现

    • flex实现

    • grid网格布局

    两边使用 float,中间使用 margin

    需要将中间的内容放在html结构最后,否则右侧会臣在中间内容的下方

    实现代码如下:

    <style>
        .wrap {
            background: #eee;
            overflow: hidden; <!-- 生成BFC,计算高度时考虑浮动的元素 -->
            padding: 20px;
            height: 200px;
        }
        .left {
            width: 200px;
            height: 200px;
            float: left;
            background: coral;
        }
        .right {
            width: 120px;
            height: 200px;
            float: right;
            background: lightblue;
        }
        .middle {
            margin-left: 220px;
            height: 200px;
            background: lightpink;
            margin-right: 140px;
        }
    </style>
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="middle">中间</div>
    </div>
    

    原理如下:

    • 两边固定宽度,中间宽度自适应。

    • 利用中间元素的margin值控制两边的间距

    • 宽度小于左右部分宽度之和时,右侧部分会被挤下去

    这种实现方式存在缺陷:

    • 主体内容是最后加载的。

    • 右边在主体内容之前,如果是响应式设计,不能简单的换行展示

    两边使用 absolute,中间使用 margin

    基于绝对定位的三栏布局:注意绝对定位的元素脱离文档流,相对于最近的已经定位的祖先元素进行定位。无需考虑HTML中结构的顺序

    <style>
      .container {
        position: relative;
      }
      
      .left,
      .right,
      .main {
        height: 200px;
        line-height: 200px;
        text-align: center;
      }
    
      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        background: green;
      }
    
      .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        background: green;
      }
    
      .main {
        margin: 0 110px;
        background: black;
        color: white;
      }
    </style>
    
    <div class="container">
      <div class="left">左边固定宽度</div>
      <div class="right">右边固定宽度</div>
      <div class="main">中间自适应</div>
    </div>
    

    实现流程:

    • 左右两边使用绝对定位,固定在两侧。

    • 中间占满一行,但通过 margin和左右两边留出10px的间隔

    两边使用 float 和负 margin

    <style>
      .left,
      .right,
      .main {
        height: 200px;
        line-height: 200px;
        text-align: center;
      }
    
      .main-wrapper {
        float: left;
        width: 100%;
      }
    
      .main {
        margin: 0 110px;
        background: black;
        color: white;
      }
    
      .left,
      .right {
        float: left;
        width: 100px;
        margin-left: -100%;
        background: green;
      }
    
      .right {
        margin-left: -100px; /* 同自身宽度 */
      }
    </style>
    
    <div class="main-wrapper">
      <div class="main">中间自适应</div>
    </div>
    <div class="left">左边固定宽度</div>
    <div class="right">右边固定宽度</div>
    

    实现过程:

    • 中间使用了双层标签,外层是浮动的,以便左中右能在同一行展示

    • 左边通过使用负 margin-left:-100%,相当于中间的宽度,所以向上偏移到左侧

    • 右边通过使用负 margin-left:-100px,相当于自身宽度,所以向上偏移到最右侧

    缺点:

    • 增加了 .main-wrapper 一层,结构变复杂

    • 使用负 margin,调试也相对麻烦

    使用 display: table 实现

    <table> 标签用于展示行列数据,不适合用于布局。但是可以使用 display: table 来实现布局的效果

    <style>
      .container {
        height: 200px;
        line-height: 200px;
        text-align: center;
        display: table;
        table-layout: fixed;
        width: 100%;
      }
    
      .left,
      .right,
      .main {
        display: table-cell;
      }
    
      .left,
      .right {
        width: 100px;
        background: green;
      }
    
      .main {
        background: black;
        color: white;
        width: 100%;
      }
    </style>
    
    <div class="container">
      <div class="left">左边固定宽度</div>
      <div class="main">中间自适应</div>
      <div class="right">右边固定宽度</div>
    </div>
    

    实现原理:

    • 层通过 display: table设置为表格,设置 table-layout: fixed`表示列宽自身宽度决定,而不是自动计算。

    • 内层的左中右通过 display: table-cell设置为表格单元。

    • 左右设置固定宽度,中间设置 width: 100% 填充剩下的宽度

    使用flex实现

    利用flex弹性布局,可以简单实现中间自适应

    代码如下:

    <style type="text/css">
        .wrap {
            display: flex;
            justify-content: space-between;
        }
    
        .left,
        .right,
        .middle {
            height: 100px;
        }
    
        .left {
            width: 200px;
            background: coral;
        }
    
        .right {
            width: 120px;
            background: lightblue;
        }
    
        .middle {
            background: #555;
            width: 100%;
            margin: 0 20px;
        }
    </style>
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>
    

    实现过程:

    • 仅需将容器设置为display:flex;

    • 盒内元素两端对其,将中间元素设置为100%宽度,或者设为flex:1,即可填充空白

    • 盒内元素的高度撑开容器的高度

    优点:

    • 结构简单直观

    • 可以结合 flex的其他功能实现更多效果,例如使用 order属性调整显示顺序,让主体内容优先加载,但展示在中间

    grid网格布局

    代码如下:

    <style>
        .wrap {
            display: grid;
            width: 100%;
            grid-template-columns: 300px auto 300px;
        }
    
        .left,
        .right,
        .middle {
            height: 100px;
        }
    
        .left {
            background: coral;
        }
    
        .right {
            width: 300px;
            background: lightblue;
        }
    
        .middle {
            background: #555;
        }
    </style>
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>
    

    flex弹性布局一样的简单

    展开全文
  • 所谓列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。1....
  • 为中间区域的父盒子添加dispaly:flex,将该布局变为flex布局,flex-direction:row表示布局的排列方式为按行排列。flex:1表示来分配剩余空间,5来表示占多少份数 //html代码 <div class="layout"> <...
  • 在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高 PS: 文末有彩蛋 两栏布局 两栏布局实现效果就是将页面分割成左右宽度不等的两列,宽度较小的列设置为固定宽度,剩余宽度由另一列撑满, 比如Ant ...
  • CSS 三栏布局宽度自适应

    千次阅读 2019-04-06 14:42:54
    页面采用流动性布局(亦可称自适应布局)在网页设计中现在已经很常见了,今天整理了一些关于宽度自适应的内容,希望加深自己对宽度自适应原理的理解。 参考了一篇挺好的博客,这篇博客帮助我很快的理解了种自适应...
  • 两栏布局与三栏布局; 两栏布局-右侧自适应三栏布局-中间自适应
  • 今天写一个供给大家参考学习,希望大家可以在这个基础上衍生一些其他的,比如三栏布局的那种:左右固定,中间自适应的效果等等 使用方法: 1、引入head部分的CSS代码 2、将body中的代码部分拷贝到你需要的地方
  • 1、绝对定位法(最易理解)左右两栏采用绝对定位,分别...于是实现了三栏自适应布局。 1 html,body{margin:0; height:100%;} 2 #left,#right{position:absolute; top:0; width:200px; height:100%;} 3 #left...
  • 三栏布局:左右固定,中间自适应的几种方式
  • CSS三栏布局——中间固定两边自适应宽度 今天早上在阿当大侠的编写高质量前端代码群中与几位朋友一起探讨和学习了一种用div+css进行的三列(三栏)布局,而且是中间固定左右两边自适应宽度,听起来蛮有意思的。因为...
  • 最近在整理css布局的一些东西,下面是三栏布局,左右宽度固定,中间自适应的五种方式,供大家参考。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
  • 三栏网页宽度自适应布局在网页中非常的常见,这里总结了三种实现三栏网页宽度自适应布局的方法,一种是绝对定位法,另一种是margin负值法,最后一种是自身浮动法。 绝对定位法 绝对定位法的原理比较简单,代码...
  • 三栏布局的方法都掌握了吗?不仅在八股文中经常出现,实际开发中也经常会遇到,涉及的知识点也比较多(虽然比较简单),这里列出了常用的 5 种方法,一起看看吧!
  • 自己在做一个后台管理系统,没有美工,就自己用CSS简单搞一个三栏布局的页面。 左右两栏固定宽度,中间栏优先加载,宽度自适应的双飞翼布局。 上代码 <!DOCTYPE html> <html lang="en"> <head&...
  • 需求:高度已知为200px,写出三栏布局,左栏和右栏各位200px,中间自适应,如下图所示: 方法一:float浮动布局 原理是:定义三个区块,需要注意的是中间的区块放在右边区块的下面,统一设置高度为200px,然后...
  • 前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应。看到这里我希望你能停下来思考几分钟,1分钟~2分钟~3分钟~4分钟~5分钟!好了,那么你想出了几种答案呢?下面提供这道题的五种...
  • 假设高度已知,请写出三栏布局,其中左右各位300px,中间自适应1、左右浮动.left {float: left;width: 300px;background: red;}.right {float: right;width: 300px;background: green;}.center {background: yellow;...
  • <link rel="stylesheet" href="./index.css" /> head> <body> <div id="box"> <div id="left">div> <div id="right">div> div> <div id="box2">div> body> html> 方案一:左侧固定宽度,右侧flex自适应 #box { width...
  • 2.不改变页面结构 个盒子都添加浮动 中间的盒子用calc指定宽度 3.不改变页面结构 左边盒子添加浮动 右面盒子添加定位 中间盒子添加左右margin值 4.改变页面结构 给左右盒子添加浮动 中间盒子用BFC 一级标题 .....
  • 本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用方法以及代码 具体实现效果展示如下: 1.二栏布局-flex弹性布局 <!-- flex弹性布局 --> <...
  • 面试高频题实现:定高100px,左右宽度均为200px,中间自适应。 1、浮动—float <style> .wrap > div {height: 200px; text-align: center; line-height: 200px; } .float .left { width: 200px; float:...
  • 但是在张鑫旭老师的《CSS世界》中提到一种方法,利用BFC属性,随意改变左右两侧的宽度,不需要改变其他值也能实现自适应三栏。具体原因可以参考该书的160页。 触发BFC的情况: 根元素,float属性不为none,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,764
精华内容 5,105
热门标签
关键字:

宽度自适应三栏的布局方式