CSS-圣杯布局，双飞翼

时间：2023-04-05 21:55:08 HTML5

三栏式布局，经典的应该是圣杯布局和双飞翼布局。先熟悉一下圣杯布局和双飞翼布局的特点：两侧固定宽度，中间自适应。首先呈现主要内容。圣杯布局main

left

right

(1)首先设置.main、.left、.right的宽度，并为左右浮动的列预留空间。.container{padding-left:200px;/*为.left宽度保留左边空间*/padding-right:300px;/*为.rightwidth预留右边空间*/}.main{float:left;width:100%;高度：300px；背景：#67c23a;}.left{浮动：左；宽度：200px；高度：300px；背景：#e6a23c;}.right{浮动：左；300像素；background:#f56c6c;}(2)通过负margin和position将left移动到左边的预留位置。.left{浮动：左；左边距：-100%；/*向左移动，100%是父元素的宽度，这里是.container的宽度*/position:relative;/*因为.container设置了padding*/right:200px;/*所以需要把自己的宽度向左移动，left:-200px;也可以*/width:200px;高度：300px；background:#e6a23c;}(3)通过right移动到右边的预留位置。.right{浮动：左；右边距：-300px；/*向右移动，自己的宽度*/width:300px;高度：300px；背景：#f56c6c;}完整代码：.container{padding-left:200px;/*为.left宽度保留左边空间*/padding-right:300px;/*为.right宽度保留左侧空间*/}.main{float:left;宽度：100%；高度：300px；背景：#67c23a;}.left{浮动：左；左边距：-100%；/*向左移动，100%是父元素的宽度，这里是.container的宽度*/position:relative;/*因为.container设置了padding*/right:200px;/*所以它需要把自己的宽度向左移动，left:-200px;也可以*/width:200px;高度：300px；背景：#e6a23c；}.right{浮动：左；右边距：-300px；/*向右移动，它自己的宽度*/width:300px;高度：300px；background:#f56c6c;}双飞翼布局mainleftright(1)先设置.wrap、.main-wrap、.left、.right的宽度为float，并为左右两列预留空间。.main-wrap{浮动：左；宽度：100%；/*必须设置，否则会浮动且没有宽度*/}.main{margin-left:200px;/*为.left宽度保留左边空间*/margin-right:300px;/*为.right宽度保留左边空间*/height:300px;背景：#67c23a;}.left{浮动：左；宽度：200px；高度：300px；背景：#e6a23c；}。右{浮动：左；宽度：300px；高度：300px；background:#f56c6c;}(2)将left向左移动负marginLocation。.left{浮动：左；左边距：-100%；/*向左移动，100%是父元素的宽度，这里是body的宽度*/width:200px;高度：300px；background:#e6a23c;}(3)通过负边距将right移动到右边的预留位置。.right{浮动：左；左边距：-300px；/*向右移动，自己的宽度*/width:300px;高度：300px；背景：#f56c6c;}完整代码：.main-wrap{float:left;width:100%;}.main{margin-left:200px;/*保留左侧空间，用于.left宽度*/margin-right:300px;/*预留左边空间，用于.right宽度*/height:300px;背景：#67c23a;}.left{浮动：左；左边距：-100%；/*向左移动，100%是父元素的宽度，这里是body的宽度*/width:200px;高度：300px；背景：#e6a23c;}.right{浮动：左；左边距：-300px；/*向右移动，它自己的宽度*/width:300px;高度：300px；背景：#f56c6c；}

上一篇：extjs6.0treepanelsettingexpandandsetselected

下一篇：ECharts的基本使用和方法

CSS-圣杯布局，双飞翼相关文章