zoukankan      html  css  js  c++  java
  • 圣杯布局总结

    1.左侧定宽,右侧自适应布局

    html部分

    <div class="parent">
        <div class="layout_left">左边宽度固定</div>
        <div class="layout_main">主内容宽度自适应</div>
    </div> 

    css部分

    <style>
            *{
                margin:0;padding:0;
            }
            .parent:after {
                clear: both;
                content: " ";
                display: table;
            }
            .layout_left, .layout_main {
                float: left;
            }
            .parent {
                padding-left: 200px;
            }
            .layout_main {
                 100%;
                background:red;
            }
            .layout_left {
                 200px;
                margin-left: -200px;
                background:green;
            }
    </style>
    

    2.右侧定宽,左侧自适应布局

    html部分

    <div class="parent">
            <div class="layout_main">主内容栏宽度自适应</div>
            <div class="layout_right">侧边栏宽度固定</div>
    </div>

    css部分

    <style>
            *{
                margin:0;padding:0;
            }
            .parent:after {
                clear: both;
                content: " ";
                display: table;
            }
            .parent {
                padding-right: 200px;
            }
            .layout_main {
                 100%;background:red;
                float: left;
            }
            .layout_right {
                float: right;
                 200px;background:green;
                margin-right: -200px;
            }
    </style>
    

    3.左/右侧定宽,中间内容自适应布局

    html部分

    <div class="parent">
            <div class="layout_aside layout_left">左侧宽度固定</div>
            <div class="layout_main">主内容栏宽度自适应</div>
            <div class="layout_aside layout_right">右侧宽度固定</div>
    </div>
    

    css部分

    <style>
            *{
                margin:0;padding:0;
            }
            .parent:after {
                clear: both;
                content: " ";
                display: table;
            }
            .layout_aside, .layout_main {
                float: left;
            }
            .parent {
                padding:0 200px;
            }
            .layout_main {
                 100%;
                background:red;
            }
            .layout_aside {
                 200px;
                background:green;
            }
            .layout_left {
                margin-left: -200px;
            }
            .layout_right {
                margin-right: -200px;
                float: right;
            }
    </style>

    这些一般平时就够用了,最后附上作者链接

    https://www.cnblogs.com/lyzg/p/5160570.html

  • 相关阅读:
    HAProxy的基础配置详解
    Nginx七层负载均衡的几种调度算法
    基于PXE网络启动的Linux系统自动化安装
    centos源码编译安装新版本内核
    Linux计划任务管理
    Linux多网卡绑定(bond)及网络组(team)
    Linux逻辑卷管理(LVM)
    pandas基础操作
    subprocess
    python常用库(转)
  • 原文地址:https://www.cnblogs.com/jrxiang/p/11268189.html
Copyright © 2011-2022 走看看