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中的图像数据
    itextSharp 附pdf文件解析
    （转）pdf文件结构
    【iCore1S 双核心板_ARM】例程九：DAC实验——输出直流电压
    【iCore4 双核心板_FPGA】例程七：状态机实验——状态机使用
    【iCore4 双核心板_FPGA】例程六：触发器实验——触发器的使用
    【iCore4 双核心板_ARM】例程八：定时器PWM实验——呼吸灯
    【iCore4 双核心板_ARM】例程七：WWDG看门狗实验——复位ARM
    【iCore1S 双核心板_FPGA】例程七：基础逻辑门实验——逻辑门使用
    【iCore1S 双核心板_FPGA】例程六：状态机实验——状态机使用
  • 原文地址：https://www.cnblogs.com/pcd12321/p/4780593.html
Copyright © 2011-2022 走看看