<!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. poj 3348 Cows 求凸包面积

    题目链接 大意: 求凸包的面积. #include <iostream> #include <vector> #include <cstdio> #include ...

  2. android小知识之邮箱地址输入自动完成

    虽然不难,但是容易忘记,做个备忘吧 package com.guet.zhuge; import android.app.Activity; import android.os.Bundle; imp ...

  3. Github Blog 搭建手册

    http://www.ilehao.com/blog/2012/11/11/github-blog-config/ http://www.freebuf.com/articles/web/25613. ...

  4. Html 小插件10 即时新闻

    效果图 <!--即时新闻--><iframe name="alimamaifrm" frameborder="0" marginheight= ...

  5. iPhone 5s网络钓鱼邮件,和苹果发布会同步亮相

    正如预期的一样,网络犯罪分子会利用Apple最新发表的iPhone 5s消息,几乎在苹果的新产品发表会同时,这个网络钓鱼(Phishing)信件开始流传.此次,趋势科技病毒防治中心 Trend Lab ...

  6. CCNA实验(8) -- PPP & HDLC

    HDLC帧格式与以太帧格式有很大差别,HDLC帧没有源MAC和目的MAC地址.HDLC不能提供验证,缺少对链路保护.Cisco设备与Cisco设备连接,可用HDLC封装.Cisco设备与非Cisco设 ...

  7. Android 流媒体系列（一）

    Android   设置铃声分析 代码其实没有几行,这里简单记录下学习的过程. Android系统启动时会扫描系统与SD卡中的对媒体文件,分别存入数据库sqlite中,以contentProvider ...

  8. Matlab单元（Cell）数据的应用

    MATLAB里面的cell有的翻译为单元有的翻译为细胞型数据.它是MATLAB的一种特殊数据类型,可以将它看作是一种无所不包的广义矩阵.组成cell的元素可以是任何一种数据类型的常数或者常量,每一个元 ...

  9. stringstream字符串流

    例题详解 題目:输入的第一行有一个数字 N 代表接下來有 N 行資料,每一行資料里有不固定個數的整數(最多 20 個,每行最大 200 個字元),請你寫一個程式將每行的总和印出來. 輸入: 3 1 2 ...

  10. 极客Web前端开发资源大荟萃

    前端开发已经成为当前炙手可热的技术之中的一个.本周我们除了给大家带技术相关资讯,另一些技术人员经常使用的站点.希望大家不要错过我们本周的内容.原文来自:极客标签 为神马说敲代码是非常艰难的 程序猿 做 ...