CSS 三栏布局之宽度自适应

最新推荐文章于 2024-08-15 15:09:51 发布

catherine_sfy

最新推荐文章于 2024-08-15 15:09:51 发布

阅读量2k

点赞数

分类专栏： CSS 文章标签： CSS 自适应 float 负margin定位

本文链接：https://blog.csdn.net/qq_40826169/article/details/89053291

版权

本文介绍了CSS三栏布局的三种自适应方法：绝对定位法、负margin法和float自身浮动法。详细阐述了每种方法的布局原理，并结合代码示例进行解释，帮助读者深入理解宽度自适应布局。

摘要由CSDN通过智能技术生成

开场白

页面采用流动性布局（亦可称自适应布局）在网页设计中现在已经很常见了，今天整理了一些关于宽度自适应的内容，希望加深自己对宽度自适应原理的理解。
参考了一篇挺好的博客，这篇博客帮助我很快的理解了三种自适应方法的原理，下面我将融合一些自己的理解，对自适应基于样例做一些记录。
参考博客如下：
https://www.zhangxinxu.com/wordpress/2009/11/我熟知的三种三栏网页宽度自适应布局方法/

一、布局描述

三栏布局，左右栏固定宽度200px，中间栏宽度自适应，高度都是100%。
效果：
在这里插入图片描述

二、绝对定位法

先看代码：

<!DOCTYPE html>
<html>
<head>
	<title>Adaptive layout</title>
	<style type="text/css">
		html,body{
    
			margin: 0;
			height: 100%;
		}
		#left,#right{
    
			position: absolute;/*here is the point*/
			top: 0;
			width: 200px;
			height: 100%;
		}
		#left{
    
			left: 0;/*here is the point*/
			background: pink;
		}
		#right{
    
			right: 0;/*here is the point*/
			background: pink;
		}
		#main{
    
			margin: 0 210px;