<!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{
            width:200px;
            float:right;
            border:1px solid black;
            height:auto;
            min-height: 200px;
        }
        .left{
            width:auto;
            border:1px solid red;
            margin-right:200px;
            height:auto;
            min-height: 200px;
        }
        .left1{
            float:left;width:200px;border:1px solid red;height:auto;min-height: 200px;
        }
        .right1{
            height:auto;border:1px solid blue;width: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>

css两列布局，一边固定宽度，另一边自适应的更多相关文章

  1. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  2. CSS两列布局的多种方式

    两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...

  3. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  4. CSS两列布局的N种实现

    一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...

  5. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  6. CSS两列布局

    方法1:左边设置绝对定位,右边设置左外边距,大小和左边的宽度相等 //CSS部分: .contain{ position :relative; height: 300px; } .left{ posi ...

  7. CSS 两列布局 之 左侧适应，右侧固定 3种方式

    第一种:左侧用margin-right,右侧float:right CSS代码: html, body,ul,li #wrapper { width: 100%; height: 100%; padd ...

  8. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  9. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

随机推荐

  1. 转载：js 创建对象、属性、方法

    1,自定义对象. 根据JS的对象扩展机制,用户可以自定义JS对象,这与Java语言有类似的地方. 与自定义对象相对应的是JS标准对象,例如Date.Array.Math等等. 2,原型(prototy ...

  2. JQuery实战学习--在dreamweaver 8中配置Jquery自动提示

    最近在学习jQuery,然后在网上找到了自动提示的方法,记之. 1,首先下载jQuery_API.mxp这个扩展文件. 2,打开DW,点击命令-->扩展管理-->文件-->安装扩展, ...

  3. 常见iis错误之一

    1.win7配置iis 出现:HTTP 错误 403.14 - Forbidden 打开 IIS 管理器. 在“功能”视图中,双击“目录浏览”. 在“目录浏览”页上,在“操作”窗格中单击“启用”. 确 ...

  4. Qt监测光驱变化（使用WM_DEVICECHANGE）

    xxx.h protected: bool winEvent(MSG *msg,long * result); xxx.cpp bool CBlurayTranscoderDlg::winEvent( ...

  5. C# WinForm判断Win7下是否是管理员身份运行

    原文:C# WinForm判断Win7下是否是管理员身份运行 如果程序不是以管理员身份运行,操作本地文件会提示:System.UnauthorizedAccessException异常 Vista 和 ...

  6. VS2012生成绿色版程序的方法

    方法就是在工程属性里设置: 配置属性-〉常规-〉项目默认值-〉MFC的使用-〉在静态库中使用MFC,见下图 之后重新编译即可.

  7. linux下解压iso文件

    .iso文件的格式是iso9660,iso9660是cd上的一种文件系统, 也就是说是 是数据在cd上的组织形式: 它的一些限制是: 1.最多8级子目录(可以用RockRidge Extension增 ...

  8. 非线性规划问题的matlab求解

    函数:[x, fval] = fmincon(FUN, X0, A, B, Aeq, Beq, LB, UB, NONLCON) 返回的x:是一个向量——在取得目标函数最小时各个xi的取值: 返回的f ...

  9. Arcgis for javascript不同的状态下自己定义鼠标样式

    俗话说:爱美之心.人皆有之. 是的.没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点. 在本文,给大家讲讲在Arcgis for javascript下怎样自己定义鼠标样式. 首先.说 ...

  10. cocos2d-x 3.1 集成 云风pbc

    cocos2d-x 3.x版本号变动比較大,从改用cmake管理整个项目,到使用python集成一体化的项目工具. 这些都是我喜欢的.我能够非常easy的在我的ubuntu上面搭建好开发环境,并且根本 ...