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

本文小编为大家详细介绍“HTML三栏布局的实现方式有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML三栏布局的实现方式有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

要达到的效果是三栏布局,两端宽度200px;固定不变,中间宽度自适应.

圣杯布局.

利用浮动和相对定位实现.

html代码

<div class="container">

    <div class="middle">

        圣杯布局中

    </div>

    <div class="left">

        圣杯布局左

    </div>

    <div class="right">

        圣杯布局右

    </div>

</div>

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代码

<div class="center">

    <div class="center-inner">

        双飞翼布局 中

    </div>

</div>

<div class="left">

    双飞翼布局 左

</div>

<div class="right">

    双飞翼布局 右

</div>

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代码

<div class="flex">

<div class="l"></div>

<div class="c"></div>

<div class="r"></div>

</div>

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代码

<div class="grid">

<div class="l"></div>

<div class="c"></div>

<div class="r"></div>

</div>

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代码

<div class="calc">

<div class="l"></div>

<div class="c"></div>

<div class="r"></div>

</div>

css代码

.calc div{

    float: left;

    height: 50px;

}

.l,.r{

    width:200px;

    background-color: red;

}

.c{

    width:calc(100% - 400px);

    background-color: green;

}

读到这里，这篇“HTML三栏布局的实现方式有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。