<!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. 初来乍到--------smarty

    Smarty Day01-----smarty的使用 作用:把php+html分离,程序和美工 使用: 1.下载源码包 2.目录结构 libs 源码文件 Smarty.class.php templa ...

  2. c++读取文件内容并保存到二维数组

    每行数据最后需要Tab处理 #include <iostream> #include <fstream> #include <string> using names ...

  3. 【算法】计算一篇文章的单词数（C、Java语言实现）

    1. C语言:一个字符一个字符的读取 (有空再贴出来) 2.Java语言:按行读取,并用正则分割成多个单词,再用MapReduce并行计算单词数 (我使用的是ieda,有些地方跟eclipse有点区别 ...

  4. 树莓派读取DHT11传感器的源代码

    import wiringpi2 as gpio owpin=8 #第8脚为1-wire脚 def getval(owpin): tl=[] #存放每个数据位的时间 tb=[] #存放数据位 gpio ...

  5. C++中类成员函数作为回调函数

    注:与tr1::function对象结合使用,能获得更好的效果,详情见http://blog.csdn.net/this_capslock/article/details/38564719 回调函数是 ...

  6. HTML5API___manifest

    离线缓存 manifest 在html标签里面增加个属性 mainfest 就可以告诉浏览器缓存文件在哪里. <html manifest='show.manifest' xmlns=" ...

  7. objective-C学习笔记（八） 集合类型 Collection Types

    OBJC的集合类型: 1.数组 Array 2.Set 3.键值对 Dictionary 数组:OC中的数组被定义为class,引用类型.索引从0开始,访问越界会抛出运行时异常. NSArray的元素 ...

  8. 面试题之请写出用于校验 HTML 文本框中输入的内容全部为数字 的 javascript 代码

    <input type="text" id="d1" onblur=" chkNumber(this)"/> <scrip ...

  9. 【转】 一个fork的面试题

    转自:一个fork的面试题 前两天有人问了个关于Unix的fork()系统调用的面试题,这个题正好是我大约十年前找工作时某公司问我的一个题,我觉得比较有趣,写篇文章与大家分享一下.这个题是这样的: 题 ...

  10. Android Gradle 配置选项合集

    //让gradle 引入构建安卓app的插件 apply plugin: 'com.android.application' //自定义变量, 使用的时候不需要 ext 前缀 ext { minSdk ...