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

最新推荐文章于 2024-07-18 17:32:29 发布

Vincen??

最新推荐文章于 2024-07-18 17:32:29 发布

阅读量110

点赞数

文章标签：前端 ViewUI

原文链接：https://segmentfault.com/a/1190000009961219

版权

左右两侧宽度固定,中间自适应这种布局相信很多feers都遇到过,可是有可能你没有系统的研究过有哪几种解决方案,本文章立志以浅显的语言来讲解其中一种圣杯解决方案。

圣杯

左右两侧宽度固定,中间自适应preview

一般我们在写这种三列布局时希望中间主体部分优先渲染,因此在html中把main部分提到left和right前面。

实现

以下代码实现由浅入深,一点一点实现,希望初学前端的同学或者比较薄弱的同学可以比较容易看懂,如果是对这种布局已经比较熟悉的同学直接看最后的实现代码吧。

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属性偏到正确的位置上

<!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内容区宽度

以上圣杯和双飞翼布局有问题或者哪里说的不对希望大家多多指正。