<body>
<div style=" float:left; width:200px; height:300px;  border: 1px #0033FF solid;">111</div>
<div style=" float:left; width:auto; height:300px; border: 1px #0033FF solid;">222</div>
</body>

或者，这样也可以。
<body>

    <nav style="width:200px; position:fix; height:100%">

    </nav>

    <div style="margin-left:200px;width:auto;>

    </div>

</body>

　　

这里有一个不错的 html5 + css3 实现的。

https://webdesign.tutsplus.com/articles/smarten-up-a-slick-login-form-with-css3--webdesign-7497

用css、html编写一个两列布局的网页，名称为css.html ，要求左侧宽度为200px ，右侧自动扩展的更多相关文章

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

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

  2. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  3. 【css】css2实现两列三列布局的方法

    前言 对于 flex 弹性布局相信大家都有所了解,它是 css3 中的属性,然而它具有一定的兼容性问题.楼主前几天面试时遇到了面试官需要设计一个两列布局,我当然就说父元素 flex 吧哩吧啦,然而需要 ...

  4. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  5. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  6. CSS读书笔记（1）---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

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

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

  8. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

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

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

随机推荐

  1. Mac下截图快捷键

    Cmd+Shift+3:全屏截图:截取整个屏幕,保存截图至桌面文件夹.Cmd+Shift+4:区域截图:鼠标光标变成带坐标的小十字,通过拖拽截取特定区域,保存截图至桌面文件夹.Cmd+Shift+4 ...

  2. Eclipse的Console乱码

    1.找到服务器bin目录:例:D:\WebLogic_11g\Middleware\user_projects\domains\dsrhd_domain\bin, 在该目录下找到setDomainEn ...

  3. load

    http://blog.scoutapp.com/articles/2009/07/31/understanding-load-averages http://blog.scoutapp.com/ar ...

  4. Java学习笔记之自定义异常

    1.自定义异常类: /** * 自定义异常,只要继承继承Exception类或其子类即可 * @author Administrator * */ public class FileException ...

  5. 【RMQ】 区间最值查询详解

    1. 概述 RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A ...

  6. Android OpenGL ES（十三）通用的矩阵变换指令 .

    Android OpenGL ES 对于不同坐标系下坐标变换,大都使用矩阵运算的方法来定义和实现的.这里介绍对应指定的坐标系(比如viewmodel, projection或是viewport) An ...

  7. THOUGHTS: programming in linux... with third_party open sources... methods

    Actually I do not have experiences in programming with open sources/third party libs.. in linux.. I ...

  8. linux 下载安装tomcat

    1.下载tomcat 2.tar -zxvf apache-tomcat-7.0.67.tar.gz 3.cd bin目录  启动  ./startup.sh [root@fuyuanming bin ...

  9. sonar tomacat配置

    最近在学习Sonar,配置了好几天,才搭建起来环境,为自己的学习能力感到汗颜,赶紧在此记录一下,所谓好记性不如烂笔头. 1.Sonar介绍 Sonar是一个用于代码质量管理的开源平台,用于管理Java ...

  10. [转]修改hosts文件不起作用

    http://wayne173.iteye.com/blog/1876565 今天遇到个很奇怪的问题,在hosts文件里添加了一些域名指向后,发现根本没起作用,后来还发现个细节,就是hosts文件左下 ...