<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. svn revert

    本地开发环境出现一个问题,用revert完美解决. 问题描述: 文件static/image/common/jiqiaodaren.png已经被提交到svn上,但是我的开发环境因未与svn同步,所以没 ...

  2. 【伪一周小结（没错我一周就做了这么点微小的工作）】HDOJ-1241 Oil Deposits 初次ＡＣ粗糙版对比代码框架重构版

    2016 11月最后一周 这一周复习了一下目前大概了解的唯一算法--深度优先搜索算法(DFS).关于各种细节的处理还是极为不熟练,根据题意判断是否还原标记也无法轻松得出结论.不得不说,距离一个准ACM ...

  3. 【转】Ecshop 后台增加一个左侧列表菜单menu菜单的方法

    cshop 后台增加一个左侧列表菜单menu菜单需要修改三个文件:/admin/includes/inc_menu.php/admin/includes/inc_priv.php/languages/ ...

  4. Linux下查看USB设备的VID、PID命令

    Linux下查看PID命令 cat /proc/bus/usb/devices 或 lsusb 方法一:在/etc/init.d/rcS中添加mount -t usbfs none /proc/bus ...

  5. Linux标准目录

    本文参考鸟哥的linux私房菜 /bin 获得最小的系统可操作性所需要的命令 /boot 内核和加载内核所需要的文件 /dev 终端.磁盘.调制解调器等的设备项 /etc 关键的启动文件和配置文件 / ...

  6. Shell命令替换与变量替换

    命令替换 命令替换是指Shell可以先执行命令,将输出结果暂时保存,在适当的地方输出.命令替换的语法: `command` 注意是反引号,不是单引号,这个键位于 Esc 键下方.下面的例子中,将命令执 ...

  7. 字符串编码问题(Ascii、Unicode、UCS-2、GBK、UTF-8)

    1.字符编码的发展 第一阶段:ASCII阶段,(American Standard Code for Information Interchange, "美国信息交换标准码),计算机当时只支 ...

  8. JavaScript（2）——对象属性、原型与原型链

    对象属性.原型与原型链 哈哈哈,我的第二篇博客哟,说的是对象属性.原型与原型链.可能这些只是某些小点串联起来的,逻辑性没有很强.所以会对文章的可读性和理解性带来一些困扰.不过,今天我又前进了那么一小步 ...

  9. 动画——animation（2）

    日常中,我们使用的动画来源有两个方面—— 第一个,自己去定义. 通过@keyframes去定义即可,格式如下: @keyframe animatename{ 0%{ //这里面写初始的对象的css样式 ...

  10. java 接口的回调

    Example6_3.java interface ShowMessage { void 显示商标(String s); } class TV implements ShowMessage { pub ...