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
  • 相关阅读:
    STL 里出现 warning C4018: “<”: 有符号/无符号不匹配
    (程序员面试题精选(02))－设计包含min函数的栈
    C++的内存分配问题
    C++ const解析（转）
    关于QQ一些功能的实现(转)
    C++中堆和栈的完全解析(转)
    关于Windows的TortoiseSVN 不能Check out google 代码的问题
    WPF笔记(2.6 ViewBox)——Layout
    我也设计模式——0.前言
    WPF笔记(2.8 常用的布局属性)——Layout
  • 原文地址：https://www.cnblogs.com/pcd12321/p/4780593.html
Copyright © 2011-2022 走看看