左右兩側寬度固定,中間自適應之【聖盃+雙飛翼】實現

時間 2019-12-07

標籤左右兩側寬度固定中間自適應實現欄目 CSS 简体版

原文原文鏈接

左右兩側寬度固定,中間自適應這種佈局相信不少feers都遇到過,但是有可能你沒有系統的研究過有哪幾種解決方案,本文章立志以淺顯的語言來說解其中一種聖盃解決方案。css

聖盃

左右兩側寬度固定,中間自適應preview

通常咱們在寫這種三列布局時但願中間主體部分優先渲染,所以在html中把main部分提到left和right前面。html

實現

如下代碼實現由淺入深,一點一點實現,但願初學前端的同窗或者比較薄弱的同窗能夠比較容易看懂,若是是對這種佈局已經比較熟悉的同窗直接看最後的實現代碼吧。前端

float:left佈局,定寬設置固定像素,自適應設置寬度爲100%

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    .left,
    .middle,
    .right{
        float: left;
        min-height: 100px;
    }
    body {
        margin: 0;
    }
    .middle {
        width: 100%;
        background: red;
    }
    .left {
        width: 200px;
        background: green;
    }
    .right {
        width: 220px;
        background: blue;
    }
  </style>
</head>
<body>
    <div class="container">
        <div class="middle">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

margin-left固定left和right位置

以上代碼由於main的寬度是100%撐滿了整個頁面,後面浮動的掉到了下面,能夠設置-margin-left把left和right位置重排。設置left的margin-left: -100%,left頂到了container左上,那麼right移動到left原來的位置,再將right的margin-left設置爲-自己寬度,left和right的位置就定位好了佈局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    .left,
    .middle,
    .right{
        float: left;
        min-height: 100px;
    }
    body {
        margin: 0;
    }
    .middle {
        width: 100%;
        background: red;
    }
    .left {
        width: 200px;
        background: green;
        margin-left: -100%;
    }
    .right {
        width: 220px;
        background: blue;
        margin-left: -220px;
    }
  </style>
</head>
<body>
    <div class="container">
        <div class="middle">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

relative+padding解決main居中顯示

以上代碼實現有個問題就是main扔充滿整個container被left遮擋,經過設置container的左右padding爲left和right留空間,再用relative屬性偏到正確的位置上spa

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style type="text/css">
    .left,
    .middle,
    .right{
        float: left;
        min-height: 100px;
    }
    body {
        margin: 0;
    }
    .container {
        padding: 0 220px 0 200px;
        overflow: hidden;
    }
    .middle {
        width: 100%;
        background: red;
    }
    .left {
        width: 200px;
        background: green;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
    .right {
        width: 220px;
        background: blue;
        margin-left: -220px;
        position: relative;
        left: 220px;
    }
  </style>
</head>
<body>
    <div class="container">
        <div class="middle">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>