<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. js获取不同浏览器盒子宽度高度

    DTD 已声明 IE document.documentElement.scrollHeight 浏览器所有内容高 度 ,document.body.scrollHeight 浏览器所有内容高度 do ...

  2. jPaginate应用

    分页结合bingojs需要注意两点 1.标签要放在bg-render外面 2.ajax请求参数包含一页显示多少条数据的字段,跟分页插件无关. 调用jPaginate插件的方法很简单: $('#page ...

  3. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  4. Delphi XE2 生成的.exe 在未安装有Delphi的电脑上运行提示 “丢失 rtl160.bpl”

    解决方案: XE2中加入了多平台的概念,默认的Release模式,也是带包编译,带运行时库的,所以,需要手工设置一下工程选项: 打开工程以后,Project-->Options-->左侧树 ...

  5. oracle中的turnc,round,floor,ceil,coalesce函数

    这四个函数有点类似java中的函数,首先是 trunc(number,[decimals]) 这个函数类似截取函数 number:表示你要输入的数 decimals(小数): 表示你要截取的位数[正数 ...

  6. Tab选项卡的原生写法

    关键点:建立点击事件和显示事件的连接,即点li 1让对应的div1出来,很容易想到遍历.索引 ;;} ul,li{list-style: none;} .tab{background: rgba(2, ...

  7. java设计模式案例详解:代理模式

    代理模式就是用一个第三者的身份去完成工作,其实际意义跟字面意思其实是一样的,理解方式有很多,还是例子直观. 本例的实现类是实现买票功能,实际应用想要添加身份验证功能,利用代理模式添加验证步骤.上例子: ...

  8. HDU 4027 <线段树，区间√>

    题目连接 题意 给出一个区间,每次把[l,r]内的值√,维护区间和. 坑: £:l会比r大,swap. £: 当f[i].sum=f[i].r-f[i].l+1;,不修改.因为保证每个数都大于等于1, ...

  9. （一）Python之猜数游戏

    猜数游戏由简如深的编码学习过程: 3次机会: print('------------------我爱鱼C工作室------------------')count=0while count < 3 ...

  10. java基本输入类型数据System.out.println()或System.out.print()