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
  • 相关阅读:
    Failed to connect to remote VM
    在hibernate中实现oracle的主键自增策略
    Eclipse快捷键大全(转载)
    hibernate 中 get、load 的 区别
    Spring2.5的新特性：第一部分
    返回上一页代码实现
    Java与Json的使用方法介绍
    也悼念那个伟大的公司
    MFC/C++检查文件是否存在
    新一代开源VoIP协议栈－－OPAL(OpenH323 v2)
  • 原文地址：https://www.cnblogs.com/pcd12321/p/4780593.html
Copyright © 2011-2022 走看看