zoukankan      html  css  js  c++  java

  • 俩列布局(左边固定，右边自适应)，等高布局

    俩列布局的三种方式：

    方式一：

    <!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta charset="utf-8">
    <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #left {
                float: left;
                width: 220px;
                background-color: green;
            }

            #content {
                background-color: orange;
                margin-left: 220px;/*==等于左边栏宽度==*/
            }
        </style>
    
</head>
<body>
    <div id="left">Left sidebar</div>
    <div id="content">Main Content</div>
</body>
</html>
    View Code

    方式二：

    <!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #left {
            background-color: green;
            float: left;
            width: 220px;
            margin-right: -100%;
        }
        
        #content {
            float: left;
            width: 100%;
        }
        
        #contentInner {
            margin-left: 220px;/*==等于左边栏宽度值==*/
            background-color: orange;
        }
        </style>
    
</head>
<body>
    <div id="left">Left Sidebar</div>
    <div id="content">
        <div id="contentInner">Main Content</div>
    </div>
</body>
</html>
    View Code

    方式三：

    <!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta charset="utf-8">
    <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #container {
                background: #ffe3a6;
            }

            #wrapper {
                border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/
                min-height: 200px;
            }
            #sidebar {
                float: left;
                width: 200px;
                margin-left: -200px;/*==此值等于左边栏的宽度值==*/       
            }
            #main {
                float: left;
            }   
        </style>
</head>
<body>
<div id="container">
            <div id="wrapper">
                <div id="sidebar">Left Sidebar</div>
                <div id="main">Main Content</div>
            </div>
</div>
</body>
</html>
    View Code


    等高布局一种方式：

    方式一：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
body{ 
    padding:0; 
    margin:0; 
    color:#f00;
    }
.container{ 
    margin:0 auto; 
    width:600px; 
    border:3px solid #00C;
    overflow:hidden; 
    }
.left{ 
    float:left; 
    width:150px; 
    background:#B0B0B0;
    padding-bottom:9999px;
    margin-bottom:-9999px;
    }
.right{ 
    float:left; 
    width:450px; 
    background:#6CC;
    padding-bottom:9999px;
    margin-bottom:-9999px;
    }

</style>

</head>

<body>

<div class="container">

    <div class="left">我是left</div>
    <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>
    
</div>
</body>
</html>
    View Code

    自适应与等高想结合的俩种方式：

    方式一：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度自适应布局</title>
<style>
body{ 
    padding:0; 
    margin:0; 
    }
.container{ 
    overflow:hidden; 
    }
.left{ 
    float:left; 
    width:220px; 
    background-color: green;
    padding-bottom:9999px;
    margin-bottom:-9999px;
    }
.right{ 
    margin-left: 220px;
    background:#6CC;
    padding-bottom:9999px;
    margin-bottom:-9999px;
    }

</style>

</head>

<body>

<div class="container">

    <div class="left">我是left</div>
    <div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度
    ft用它的padding-bottom补偿了这部分高度
    ft用它的padding-bottom补偿了这部分高度
    ft用它的padding-bottom补偿了这部分高度
    </div>
</div>
</body>
</html>
    View Code

    方式二：

    <!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
        overflow: hidden;
        }
        #left {
            background-color: green;
            float: left;
            width: 220px;
            margin-right: -100%;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        
        #content {
            float: left;
            width: 100%;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        
        #contentInner {
            margin-left: 220px;/*==等于左边栏宽度值==*/
            background-color: orange;
        }
        </style>
    
</head>
<body>
<div id="div1">
    <div id="left">Left Sidebar</div>
    <div id="content">
        <div id="contentInner">Main ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain 

ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain ContentMain Content</div>
    </div>
    </div>
</body>
</html>
    View Code
  • 相关阅读:
    数据查询语言DQL 与 内置函数（聚合函数）
    数据操作语言DML与运算符
    解决Nginx重启时提示nginx: [emerg] bind() to 0.0.0.0:80错误
    Linux 重启nginx
    一群猴子排成一圈，按1，2，...，n依次编号
    阿里云云盾服务证书免费CA证书申请与配置 （原）
    Linux 配置文件
    php $_FILES上传失败 error返回值说明
    Ecshop 表结构 字段说明
    JS 笔记~
  • 原文地址：https://www.cnblogs.com/pcd12321/p/4780593.html
Copyright © 2011-2022 走看看