<!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. cocos2d-x 多点触控实现缩放及相关问题的解决方法

    首先,来看下代码: 声明文件: #ifndef __loading__MoreTouches__ #define __loading__MoreTouches__ #include <iostr ...

  2. display：table标签来自动改变列宽 改变的同时table的整体宽度跟随变化

    发现公司里的所有分页功能都是通过display:talbe来实现的,但是用户最近说要让表格列宽可以拖动:所有我就寻找了好多的办法:网上找了很多的资料,但是都不是我要的效果因为他们都是列宽不改变要不就是 ...

  3. UVA-514 Rails (栈)

      Rails  There is a famous railway station in PopPush City. Country there is incredibly hilly. The s ...

  4. java中File类详解

    构造函数 代码如下: public class FileDemo {     public static void main(String[] args){         //构造函数File(St ...

  5. Ajax异步请求XMLHttpRequest对象Get请求

    $(function () { $("#btnGetDate").click(function () { var xhr; //第一步:创建异步请求的核心的对象: if (XMLH ...

  6. activity的横屏和竖屏设置

    主要在清单文件这样配置: <application android:allowBackup="true" android:icon="@drawable/ic_la ...

  7. EF的泛型封装 写的很好 转自Fly_Elephant http://www.cnblogs.com/xiaofeixiang/p/4188600.html?utm_source=tuicool

    Entity Framework本身的增删改查其实 已经很方便了,不过做项目的时候用的多了也就觉得有点累了,每个业务实体基本上都涉及到到了增删改查这四个基本的要素,至于封装每个公司可能都不一样,接口, ...

  8. C++中 指针 与 引用 的区别

    四点区别:可否为空,可否修改,使用时是否需要判断,使用场景 非空区别. 引用必须指向某个对象,而指针可以指向空. 可修改区别. 引用总是与初始化时的那个对象绑定,不可变更:指针可以重新赋值,指向另外一 ...

  9. BZOJ 3223: Tyvj 1729 文艺平衡树(splay)

    速度居然进前十了...第八... splay, 区间翻转,用一个类似线段树的lazy标记表示是否翻转 ------------------------------------------------- ...

  10. Python学习笔记 (3) ：列表、元组的操作

    列表,即写在方括号之间.用逗号分隔开的数值列表.列表内的项目不必全是相同的类型. >>> a = ['spam', 'eggs', 100, 1234] >>> a ...