<!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. PCB打样镀层问题

    现在大部分pcb打样所用PCB板一般有锡板和金板之分(一般根据客户要求和产品特 性选择),那么它们有什么区别呢?现在我将他们的区别作比较如下: 1. 从成本方面来说,锡板价格低,金板价格高. 2. 从 ...

  2. ThinkPHP 3 的输出

    一.ThinkPHP 3 的输出 (重点) a.通过 echo 等PHP原生的输出方式在页面中输出 b.通过display方法输出 想分配变量可以使用assign方法 c.修改左右定界符 休要修改配置 ...

  3. InnerException 消息是“反序列化对象 属于类型 *** 时出现错误。读取 XML 数据时，超出最大字符串内容长度配额 (8192)。(注意细节)

    WEB站点在调用我们WCF服务的时候,只要传入的参数过长,就报如下错误: 格式化程序尝试对消息反序列化时引发异常: 尝试对参数 http://tempuri.org/ 进行反序列化时出错: formD ...

  4. ubuntu apache fastcgi 虚拟主机安装

    1 cp /etc/apache2/sites-available/default /etc/apache2/sites-available/www.domain.com 这里www.domain.c ...

  5. IOS开发之----协议与委托（Protocol and Delegate) 实例解析

    1 协议: 协议,类似于Java或C#语言中的接口,它限制了实现类必须拥有哪些方法. 它是对对象行为的定义,也是对功能的规范. 在写示例之前我给大家说下@required和@optional这两个关键 ...

  6. HTML5API___geolocation

    地理位置查询:geolocation window.navigator.geolocation 该对象下总共有3个方法 Geolocation {getCurrentPosition: functio ...

  7. java 汉字转拼音

    先决条件: pinyin4j.jar(Pinyin4j是一个流行的Java库,支持中文字符和拼音之间的转换.拼音输出格式可以定制.) 下载地址:http://pan.baidu.com/share/l ...

  8. linux:如何修改用户的密码

    1.首先,要用CRT软件连接Linux系统. 2.首选,确认是用root用户登录系统的. 输入命令: id ,查看登录用户信息. 3.若修改root自己的密码,直接输入 passwd . 输入两遍,新 ...

  9. POJ 2752 Seek the Name, Seek the Fame（求所有既是前缀又是后缀的子串长度）

    题目链接:http://poj.org/problem?id=2752 题意:给你一个字符串,求出所有前缀后缀(既是前缀又是后缀的子串)的长度 思路:首先整个字符串肯定既是前缀又是后缀,为最大的前缀后 ...

  10. BZOJ 2724: [Violet 6]蒲公英( 分块 )

    虽然AC了但是时间惨不忍睹...不科学....怎么会那么慢呢... 无修改的区间众数..分块, 预处理出Mode[i][j]表示第i块到第j块的众数, sum[i][j]表示前i块j出现次数(前缀和, ...