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>

  • 相关阅读:
    必须为接口 System.Collections.IComparer 实现
    C#编写的windows程序随系统启动的问题
    ReportViewer导出Excel的问题
    英语听力的技巧
    Windows中无法删除文件的解决办法
    RDLC/RDL 动态报表
    Only export to PDF format from ReportViewer addin
    提高ASP.Net网站性能
    关于Spring 国际化 No message found under code 的解决方案
    Axis2中使用WSAddressing协议
  • 原文地址:https://www.cnblogs.com/gdcgy/p/5291084.html
Copyright © 2011-2022 走看看