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
  • 相关阅读:
    PDF文件中的Form保存问题
    Understanding IP Fragmentation
    tcp ip guide IPsec IKE
    Windows安全事件日志中的事件编号与描述
    Cisco PIX fix up and Juniper firewall FTP ALG
    很好的IPSec介绍，详细解释了IKE协商的2个阶段的作用
    virtualbox 下运行Ubuntu 8.10的分辨率和guest additions的问题。
    Fixing the ‘Do you want to display nonsecure items’ message
    windows xp 开始菜单里面所有项目右键不起作用。
    HP backup and recovery manager
  • 原文地址：https://www.cnblogs.com/pcd12321/p/4780593.html
Copyright © 2011-2022 走看看