本文小编为大家详细介绍“HTML三栏布局的实现方式有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML三栏布局的实现方式有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
创新互联-专业网站定制、快速模板网站建设、高性价比谯城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式谯城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖谯城地区。费用合理售后完善，十载实体公司更值得信赖。
要达到的效果是三栏布局,两端宽度200px;固定不变,中间宽度自适应.
圣杯布局.
利用浮动和相对定位实现.
html代码
圣杯布局中
圣杯布局左
圣杯布局右
css代码
.left,
.middle,
.right{
position: relative;
float: left;
}
.container{
padding:0 200px 0 200px;
overflow: hidden;
}
.container div{
height: 100px;
}
.left,.right{
width: 200px;
background: red;
}
.left{
margin-left: -100%;
left: -200px;
}
.right{
margin-left: -200px;
right: -200px;
}
.middle{
width: 100%;
background: blue;
}
双飞翼布局
同圣杯布局差不多,只不过在实现中间部分自适应的方式有所区别,这种方式多嵌套了一个div.
html代码
双飞翼布局 中
双飞翼布局 左
双飞翼布局 右
css代码
.left,
.center,
.right {
float: left;
height: 100px;
}
.left {
margin-left: -100%;
width: 200px;
background: red;
}
.right {
margin-left: -200px;
width: 200px;
background: red;
}
.center {
width: 100%;
background: green;
}
.center-inner {
margin-left: 200px;
margin-right: 200px;
}
上述布局方式都是采用的传统的css标准实现,下面介绍三种其他的实现的方式(flex,grid,calc()).
flex
利用flex的元素属性实现.元素属性的flex是一个复合属性.flex:flex-grow | flex-shrink | flex-basis;分别为:空间充足放大比,空间不足缩小比以及计算剩余空间之前的宽度值.
可参考阮一峰的文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
html代码
css代码
.flex{
display: flex;
}
.flex div{
height: 50px;
}
.l,.r{
background-color: yellow;
flex:0 0 200px;
}
.c{
flex:1;
background-color: red;
}
grid
grid是微软提出的网页布局解决方案,最新的Safari，Chrome，Firefox都已经进行了支持.个人感觉grid布局比flex布局更强大一些,宽度高度两个方向上都可以得到控制.grid也更容易理解.
html代码
css代码
.grid{
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows:100px
}
.l,.r{
background-color: red;
}
.c{
background-color: pink;
}
css3的calc()函数
css3提供的calc()函数能够实现给宽高等设置动态的值.支持 + - * / 四则运算.注意运算符两边要个留一个空格.否则设置无效.
同样需要设置浮动将三个元素并排显示.如果不想设置浮动的话,可将单个内部div设置为inline-block;同时,为了取消换行带来的html显示间隙.需将最外层盒子的字体设置为0,即 .calc{font-size:0}.
html代码
css代码
.calc div{
float: left;
height: 50px;
}
.l,.r{
width:200px;
background-color: red;
}
.c{
width:calc(100% - 400px);
background-color: green;
}
读到这里，这篇“HTML三栏布局的实现方式有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。