天天看點
傳回

三欄布局的實作(左右固定寬，中間自适應)

第一種使用float布局 
<style>
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: aqua;
        float: left;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: blue;
        float: right;
    }
    .middle{
        background-color: black;
        width: calc(100% - 400px);
        float: left;
        height: 100%;
    }
</style>
<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>
第二種使用float加margin 
<style>
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: aqua;
        float: left;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: blue;
        margin-top: -100vh;
        float: right;
    }
    .middle{
        margin-left: 200px;
        background-color: black;
        width: calc(100% - 400px);
        height: 100%;
    }
</style>
<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>
第三種：flex布局 
html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
        display: flex;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: aqua;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: blue;
    }
    .middle{
        background-color: black;
        flex:1;
        height: 100%;
    }
</style>
<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

第四種：定位實作

<style>
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .box{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: aqua;
        position: absolute;
        left: 0;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: blue;
        position: absolute;
        right: 0;
    }
    .middle{
        background-color: black;
        width: calc(100% - 400px);
        height: 100%;
        position: absolute;
        left: 200px;
    }
</style>
<div class="box">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

效果都是：

三欄布局的實作(左右固定寬，中間自适應)
第五種：雙飛翼布局 
<style>
    body,
    html {
        height: 100%;
    }

    .container {
        height: 100%;
    }

    .center {
        width: 100%;
        height: 100%;
        background-color: burlywood;
        float: left;
    }

    .middle {
        width: 100%;
        height: 100%;
        margin: 0 200px;
    }

    .left {
        width: 200px;
        height: 100%;
        float: left;
        background-color: cadetblue;
    }

    .right {
        width: 200px;
        height: 100%;
        float: left;
        background-color: coral;
    }
</style>

<body>
    <div class="container">
        <div class="center">
            <div class="middle">middle</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
第六種：聖杯布局 
<style>
    html,
    body {
        height: 100%;
    }

    .container {
        width: 100%;
        height: 100%;
    }
    .middle {
        width: 100%;
        height: 100%;
        background-color: cornflowerblue;
        padding: 0 200px;
        box-sizing: border-box;
        float: left;
    }

    .left {
        width: 200px;
        height: 100%;
        background-color: cyan;
        margin-left: -100%;
        float: left;
    }

    .right {
        width: 200px;
        height: 100%;
        background-color: darkcyan;
        margin-left: -200px;
        float: left;
    }
</style>
<div class="container">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
雙飛翼布局和聖杯布局很類似，不同的地方在于left和right塊的位置相對于誰而言。這兩種方法跟前面幾種不同的還有加載順序，這兩種是浏覽器先加載中間的再加載兩邊的，是以看需求吧。
小知識點 html css flex
上一篇: Expert 101 Oracle——表
下一篇: idean Error:java: 無效的目标發行版: 1.8

繼續閱讀