<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. 网络请求 get post

    1.新建一个网络请求工具类,负责整个项目中所有的Http网络请求 提示:同步请求会卡住线程,发送网络请求应该使用异步请求(这意味着类方法不能有返回值) 2.工具类的实现 YYHttpTool.h文件 ...

  2. php添加gd

    一 GD简介: php处理图形的扩展库,提供了一系列用来处理图片的API.如果开发过程中发现有页面验证码不能显示,则要考虑检查phpinfo(),是否支持GD库. 二 思路: 网上发现添加GD库的方法 ...

  3. 两种方法将oracle数据库中的一张表的数据导入到另外一个oracle数据库中

    oracle数据库实现一张表的数据导入到另外一个数据库的表中的方法有很多,在这介绍两个. 第一种,把oracle查询的数据导出为sql文件,执行sql文件里的insert语句,如下: 第一步,导出sq ...

  4. apache php 配置 CI 框架

    声明:配置域名需要用到  httpd.conf  httpd_vhosts.conf  (apache) 中两个文件 和   hosts (C:\Windows\System32\drivers\et ...

  5. List、Set、Map集合存放null解析及HashMap、Hashtable异同点解析

    1.List.Set.Map集合存放null解析: @Test public void CollectionTest() { // 测试List List<Object> list = n ...

  6. DHCPv6

    SLAAC(RFC4862)(StatelessAddressAutoconfiguration),无状态自动配置 IT网,http://www.it.net.cn DHCPv6包含以下两种形式: n ...

  7. android Actionmode 样式自定义

    <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar" ...

  8. 最短路径算法——Dijkstra算法

    在路由选择算法中都要用到求最短路径算法.最出名的求最短路径算法有两个,即Bellman-Ford算法和Dijkstra算法.这两种算法的思路不同,但得出的结果是相同的. 下面只介绍Dijkstra算法 ...

  9. javascript语句语义大全（6）

    var d = new Date();//创建当前日期对象var d = new Date('2016/03/22');//允许var d = new Date('2016/3/22');//允许va ...

  10. VBS脚本和HTML DOM自动操作网页

    VBS脚本和HTML DOM自动操作网页 2016-06-16 10:24 1068人阅读 评论(0) 收藏 举报  分类: Windows(42)  版权声明:本文为博主原创文章,未经博主允许不得转 ...