网页三栏布局常用方法

三栏布局

三栏布局 在网页布局中算是比较长江的一种，比如淘宝等，诸多网站都是用的三栏布局
它是两边元素固定，中间自适应，并且中间的元素优先渲染

第一种：定位
也是比较粗暴的一种定位但本人不建议使用布局容易混乱

第二种：浮动

结构<div class="container"><div class="left">Left</div><div class="right">Right</div><div class="main">Main</div></div>

    body,html{height: 100%;padding:0;margin: 0;}/*左边栏左浮动*/.left{float:left;height:100%;width:100px;background:#ff69b4;}/*中间栏自适应*/.main{height:100%;margin:0 200px 0 100px;background: #659;}/*右边栏右浮动*/.right{float:right;height:100%;width:200px;background:#ff69b4;}

特点：

简单，兼容性好
当中间内容高于两侧时，两侧高度不会随中间内容变高而变高

flex布局

结构与上一种方式结构一样  （同上）
下面我就不写了

样式

  .container{display: flex;}.left{width:200px;background: red;}.main{flex: 1;background: blue;}.right{width:200px;background: red;}

特点：

简单、优雅
未来发展趋势，实用
三栏高度统一

table布局

 <div class="container"><div class="left">left</div><div class="main">center</div><div class="right">right</div></div>

样式

   .container{display: table;width:100%;}.container>div{display: table-cell;}.left{width: 100px;background: red;}.main{background: blue;}.right{width: 200px;background: red;}

圣杯布局


<body><div class="wrap"><div class="main"> 两边元素固定，中间自适应，并且 中间的元素优先渲染</div><div class="left">left</div><div class="right">right</div></div>
</body>

样式


<style>.wrap{padding: 0 300px 0 200px;}.main, .left, .right{float: left;width: 100%;}.main{background-color: #ccc;}.left{background-color: #ffb;position: relative;width: 200px;left: -200px;margin-left: -100%;}.right{background-color: #f65;position: relative;width: 300px;right: -300px;margin-left: -300px;}
</style>

将wrap设置padding，是为了将left，和right的位置预留出来，否则左右部分会覆盖在中间内容上。
重点：负边距
当我们给元素加上相反的负边距的时候，它会认为它前面的元素的宽度减少了这么多，而实际上前者的宽度并没有改变，最终的效果为：加负边距的元素浮在了它前面元素的上方

双飞翼布局（float)

<body><div class="wrap"><div class="main"><div class="content">两边元素固定，中间自适应，并且 中间的元素优先渲染</div></div><div class="left">left</div><div class="right">right</div></div>
</body>

它由淘宝首创，和圣杯布局实现的效果几乎一样，核心也都是负边距的应用，只不过文档结构和样式略有区别。

<style>.main, .left, .right{float: left;}.main{background-color: #ccc;width: 100%;}.main .content{margin-left: 200px;margin-right: 300px;}.left{background-color: #ffb;width: 200px;margin-left: -100%;}.right{background-color: #f65;width: 300px;margin-left: -300px;}
</style>

中间部分加了一个div 用来放内容，当left 和 right 浮在它（div main）上面的时候不至于覆盖住它的内容

还有一种网格布局(grid) ，但兼容性不好不推荐使用就不说了个人建议用圣杯布局

网页三栏布局常用方法相关推荐

用CSS的float属性创建三栏布局网页的方法
三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度.本文介绍一 ...
html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...
假设高度已知,请写出三栏布局,其中左右各位300px,中间自适应 1.左右浮动 .left { float: left; width: 300px; background: red; } .right ...
idiom的学习笔记（一）、三栏布局
三栏布局左右固定,中间自适应是网页中常用到的,实现这种布局的方式有很多种,这里我主要写五种.他们分别是浮动.定位.表格.flexBox.网格. 在这里也感谢一些老师在网上发的免费教程,使我们学习起来更 ...
【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
css布局：table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
三栏布局的几种实现方式
三栏布局是一种经典的页面布局:在网页上以平铺方式展现的左中右三列布局,其特点在于,左右两列可固定在网页两侧,中间一列永远居中,且当网页宽度大于左右两列宽度之和时,中间一列可随网页整体宽度的变化而变化( ...
六种方法实现CSS三栏布局
方法一:浮动+margin 实现方法:左栏向左浮动,右栏向右浮动,中间栏不设宽度,用左右margin来撑开距离. <!DOCTYPE html> <html><head& ...
三种方法实现CSS三栏布局
本文由云+社区发表作者:前端林子本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...

网页三栏布局常用方法

三栏布局

第二种：浮动

flex布局

table布局

圣杯布局

双飞翼布局（float)

还有一种网格布局(grid) ，但兼容性不好不推荐使用就不说了个人建议用圣杯布局

网页三栏布局常用方法相关推荐

最新文章

热门文章

网页三栏布局常用方法

三栏布局

第二种：浮动

flex布局

table布局

圣杯布局

双飞翼布局（float)

还有一种 网格布局(grid) ，但兼容性不好 不推荐使用就不说了 个人建议用圣杯布局

网页三栏布局常用方法相关推荐

最新文章

热门文章

还有一种网格布局(grid) ，但兼容性不好不推荐使用就不说了个人建议用圣杯布局