葡萄游戏厅—葡萄游戏厅官网网站

常见的五种三列布局葡萄游戏厅官网网站

澳门新葡亰老虎机网址2019-10-09 13:52

前言:本文介绍五种常见的三列布局,主要是两侧定宽,中间自适应,其他情况大同小异。

 

方式一:float

HTML代码:

<div class="layout-float">
    <div class="left">左边</div>
    <div class="right">右边</div>
  <div class="center">中间</div>

</div>

注:center要放最后。center这个元素是块级元素,占据一行,如果center放中间,right元素会在下一行向右浮动

CSS代码:

<style>
    .left {
        float: left;
        width: 300px;
        background-color: blue;
    }
    .right {
        float: right;
        width: 300px;
        background-color: blue;
    }
     .center {
        background-color: red;
    }
</style>            

方式二:table布局,非HTML中<table>标签

HTML代码:

<div class="layout-table">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

CSS代码:

<style>
    .layout-table{
        width: 100%;
        display: table;
        height: 100px;
    }
    .layout-table div {
        display: table-cell;
    }
    .left {
        width: 300px;
        background-color: blue;
    }
    .right {
        width: 300px;
        background-color: red;
    }
    .center {
        background-color: blue;
    }
</style>    

 

方式三:flex布局

HTML代码:

<div class="layout-flexbox">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

 

CSS代码:

<style>
    .layout-flexbox{
        display: flex;
    }

    .left {
        width: 300px;
        background-color: blue;
    }

    .center {
        flex: 1;
        background-color: green;
    }

    .right {
        width: 300px;
        background-color: blue;
    }
</style>

 

方式四:grid布局

 

HTML代码:

<div class="layout-grid">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

 

 

CSS代码:

<style>
    .layout-grid{
        display: grid;
        width:100%;
        grid-template-rows:100px;
        grid-template-colums:300px auto 300px;
    }
    .left {
        background-color: blue;
    }
    .center {
        background-color: green;
    }
    .right {
        background-color: blue;
    }
</style>

 

 

方式五:绝对布局

 

HTML代码:

<div class="layout-absolute">
    <div class="left"></div>
    <div class="center">这是中间</div>
    <div class="right"></div>
</div>

 

 

CSS代码:

<style>
    .layout-absolute div{
        position: absolute;
    }
    .left {
        left:0;
        width:300px;
        background-color: blue;
    }
    .center {
        left:300px;
        right:300px;
        background-color: green;
    }
    .right {
        width:300px;
        right:0;
        background-color: blue;
    }
</style>        

 五种方法的优缺点:

float:兼容性较好,一般需要清除浮动

table:兼容性较好,SEO不太友好

grid:新技术,对旧浏览器兼容不太好,代码简洁

absolute:方便易用,脱离文档流,可使用性较差

flex:没什么明显缺点,且移动端友好