三列布局自适应【四种方法】

最新推荐文章于 2024-05-24 17:57:30 发布

monikaH

最新推荐文章于 2024-05-24 17:57:30 发布

阅读量1.4k

点赞数 2

分类专栏： css3 文章标签：三列布局 css

本文链接：https://blog.csdn.net/qq_40072782/article/details/82927573

版权

css3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

面试时遇到这样一个题，题目要求：分为左中右三列，左右两边固定宽度，均为200px；中间宽度自适应。当时没太明白，甚至把几个元素混为一谈了。得空了便来捋一捋。
我们先设这三块分别为left、middle、right。

1、浮动法（float与absolute区别在第二点）

浮动法的原理：
对左右块使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素在正常文档流中。
注意：
middle位置要求：middle块一定要放在left和right之后，因为它占据文档流位置，所以一定要放在最后

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三列自适应布局 浮动</title>
<style type="text/css">
#box{
	height: 200px;
}
#left {
    width: 200px;
    height: 200px;
	float: left;
	background-color: #ffe6b8；
} 
#right{ 
	width: 200px;
	 height: 200px;
	float: right;
	background-color: #ffe6b8;
}  
#middle{ background-color: #a0b3d6;height: 200px;}
</style>
</head>
<body>
  <div id="box">
	<div id="left">left</div>
	<div id="right">right</div>

	<div id="middle">middle</div>  <!--注意middle块的位置，虽然写在right后面，但是在布局效果中出现在中间 -->
	</div>
  </div>
</body>
</html>

效果如下：
在这里插入图片描述

2、绝对定位

这种方法就是利用了绝对定位absolute，让左右两块脱离文档流，此时left和right与文档流无关，不占据空间。定位的元素和其他元素重叠。此处的left是叠在middle上的。

方法1和2的区别：
在CSS中也可以通过float或者position:absolute两种方法让元素脱离文档流。而这两者的表现实际上非常相似。简单的可以理解为部分无视和完全无视的区别：

使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置（即在文档流中占位置），环绕在周围(可以说是部分无视)。而对于使用position:absolute脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它(不占位置)。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三列自适应布局 左右绝对定位absolute</title>
<style type="text/css">
*{
	padding: 0;margin: 0;
}
#left{
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute; 
    top: 0;
    left: 0;   //注意这里
}
#middle{
    height: 200px;
    background: red;
    text-align: center;
   
}
#right{
    width: 200px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 0;
    right: 0;   //注意这里
    
}
 
</style>
</head>
<body>

<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>

</body>
</html>

在这里插入图片描述

3、marign负值法

该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。
要求：在middle外部再加一个div。此div需要设置float属性使其形成一个BFC（请自行百度点击跳转），并设置宽度，并且这个宽度要和left块的margin负值进行配合。看代码吧

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三列自适应布局 marign负值法</title>
<style type="text/css">
#div{
	width: 100%;
	height: 200px;
	background: green;
	float: left;   /*记得是包含middle外层的div写啊*/
}
#middle{
	height: 100%;
	background: red;
}
#right,#left{
	width: 200px;
	height: 200px;
	float: left;     /*左右块浮动*/
}
#left{
	background: yellow;
	margin-left: -100%;     /*-100%是因为相对来说它偏移到下一行去了*/
}
#right{
	background: blue;
	margin-left: -200px;  /*这里的宽度一定要设置成等于负的包含middle的那个块的宽度*/
}
</style>
</head>
<body>
<div id="div">
	<div id="middle">middle</div> <!-- middle必须放在最前面 -->
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>

在这里插入图片描述

4. css3新属性flex方法

flex相关的请移步flex属性简介
写一个<`div>，在flex中类似于容器，
将left、right、middle全部包进去
并设div的display：flex。
flex ：auto相当于 1 1 auto，flex元素在需要的时候既可以拉伸也可以收缩

flex-grow 按比例分配空间（放大比例），以·flex-basis为基础，沿主轴方向增长尺寸
flex-shrink 元素收缩
flex-basis 该元素空间大小，flex里除了元素所占的空间意外其余的元素就是可用空间。默认auto

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>三列自适应布局 css3新属性flex方法</title>
<style type="text/css">
  #box{
  	width: 100%;
    height: 200px;
    display: flex;
  }
  #left,#right{
  	width: 200px;
  	height: 200px;
  	background: pink;
  }
  #middle{
  	flex: auto; 
  	background: skyblue;
   /*	注： flex属性是flex-grow（项目放大比例）, flex-shrink（缩小比例） 和 flex-basis(定义该元素空间大小)的简写，默认值为0 1 auto。后两个属性可选*/
  }

</style>
</head>
<body>
<!-- 写一个的div包含left、right、middle，设置为display：flex；并将middle设置flex：1； -->
<div id="box">
<div id="left">left</div>
<div id="middle">middle </div>
<div id="right">right</div>
</div>
</body>
</html>

在这里插入图片描述

补充：实现下图效果
在这里插入图片描述

 <style>
    body{
        margin:0;
        padding: 0;
    }
    #top{
        width: 100%;
        height: 60px;
        border:2px solid blue;
        margin-bottom: 30px;
    }
    #content{
        width:100%;
        height: 400px;
        display: flex;
    }
    #left {
        width: 100px;
        border:2px solid blue;
        margin-right: 30px;

    }
    #middle{
         border:2px solid blue;
         flex: 1;
    }
    #right{
        width: 60px;
        border:2px solid blue;
        margin-left: 30px;
    }
    </style>


    <div id="top">A区域 </div>
    <div id="content">
        <div id="left">B区域</div>
        <div id="middle">C区域</div>
        <div id="right">D区域</div>
    </div>

浏览器上显示效果如下图
在这里插入图片描述

monikaH

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
三列布局自适应【四种方法】

面试时遇到这样一个题，题目要求：分为左中右三列，左右两边固定宽度，均为200px；中间宽度自适应。当时没太明白，甚至把几个元素混为一谈了。得空了便来捋一捋。我们先设这三块分别为left、middle、right。1、浮动法浮动法的原理：对左右块使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素在正常文档流中。注意：middle位置要求...
复制链接

扫一扫