专栏首页小蔚记录左右侧边栏固定宽,中间宽度自适应

左右侧边栏固定宽,中间宽度自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style type="text/css">        
        *{margin: 0;padding: 0;}
        html, body{height: 100%;}

        /*定位布局*/   
        .container, .left, .right, .center { 
            height: 100%;
        }
        .container{ 
            position: relative;
        }
        .left, .right{
            top: 0;
            position: absolute;
            width: 200px;
        }
        .left{
            left: 0;
            background-color: #f60;
        }
        .right{
            right: 0;
            background-color: #e30;
        }
        .center{
            background-color: #fde560;
            padding: 10px 10px 0 10px;
            margin: 0 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="center">左右栏固定宽、中间栏宽度自适应</div>
        <div class="right"></div>
    </div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css+ js 实现圆环时钟

    小蔚
  • BUTTONS V. 2.0.0——CSS按钮库

    参考资料 BUTTONSV. 2.0.0 Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。

    小蔚
  • html --- rem 媒体查询

    手机屏幕的分辨率越来越高,比如iPhone 5为640*1136 px、iPhone 6/6S为750*1334 px。我拿到的UI图,其参考分辨率为1440*...

    小蔚
  • CSS布局 -- 左侧定宽,右侧自适应

    书童小二
  • 翻译:如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添...

    欲休
  • CSS魔法堂:说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了;2. 它跟Norma...

    ^_^肥仔John
  • JS-匀速运动-运动停止

    xing.org1^
  • float到底是干什么的?

    划重点 float的真正用途不是我们平时用于将同模块下的元素并行显示,也不是为了实现将元素放在某一特殊位置时使用! float正真的作用是!各位老爷可以...

    lvgo
  • CSS 基础系列:常见布局方式

    给 header、content、footer 设置相同的 width 或者 max-width(显示的宽度都一样,但是前者内容过长会溢出,后者会换行),再设置...

    Chor
  • 前端-CSS-更改标签样式-长宽字体-背景-边框-显示方式-定位-透明度-扩展点-02

    suwanbin

扫码关注云+社区

领取腾讯云代金券