HTML三栏布局的实现方式有哪些

本文小编为大家详细介绍“HTML三栏布局的实现方式有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML三栏布局的实现方式有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
要达到的效果是三栏布局,两端宽度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三栏布局的实现方式有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: 原生js提示框并自动关闭怎么实现

这篇文章主要介绍“原生js提示框并自动关闭怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“原生js提示框并自动关闭怎免费云主机域名么实现”文章能帮助大家解决问题。js提示框，n秒后自动关闭，多用于简单的提示，无需…