zoukankan      html  css  js  c++  java
  • css两列布局,一边固定宽度,另一边自适应

    <!DOCTYPE HTML>
    <HTML>
        <head>        
            <meta charset="utf-8" />
            <title>css两列布局,一边固定宽度,另一边自适应</title>
        </head>
        <style>
            a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{
                margin: 0;
                border: 0;
                padding: 0;
                font-style: normal;
                color: #323232;
                box-sizing: border-box;
                -moz-box-sizing:border-box; /* Firefox */
                -webkit-box-sizing:border-box; /* Safari */
            }
            .right{
                200px;
                float:right;
                border:1px solid black;
                height:auto;
                min-height: 200px;
            }
            .left{
                auto;
                border:1px solid red;
                margin-right:200px;
                height:auto;
                min-height: 200px;
            }
            .left1{
                float:left;200px;border:1px solid red;height:auto;min-height: 200px;
            }
            .right1{
                height:auto;border:1px solid blue;auto;margin-left:200px;min-height: 200px;
            }
        </style>

        <body>
            <div>
                <div class="right">右边固定</div>
                <div class="left">左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应
                </div>
            </div>

            <div style="margin-top: 10px;">
                <div class="left1">
                    左边固定
                </div>
                <div class="right1">
                    右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
                </div>
            </div>

        </body>

    </HTML>

  • 相关阅读:
    socket套接字 struct模块
    网络编程 OSI七层协议
    内置方法 eval | exec 元类 单例
    选课系统
    iOS清理缓存 2016-04-19
    iOS 蓝牙 技术
    iOS人脸识别
    iOS 指纹识别
    极光推送的初步配置及其使用
    iOS 加急审核
  • 原文地址:https://www.cnblogs.com/gdcgy/p/5291084.html
Copyright © 2011-2022 走看看