左右两侧宽度固定,中间自适应之【圣杯+双飞翼】实现

时间 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>

双飞翼布局

双飞翼布局和圣杯布局其实很想,只是在解决container 100%遮挡问题上解决不一样,双飞翼使用的是内嵌div设置margin来缩小main内容区宽度code

以上圣杯和双飞翼布局有问题或者哪里说的不对但愿你们多多指正。htm