<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>左右布局（左侧定宽，右侧自适应宽）</title>
<style type="text/css">
body{font:12px arial;color:#000;background:#fff;margin:0}
#header{height:50px;color:#fff;background:#666;line-height:50px;margin-bottom:10px}
#content{width:100%;color:#fff;float:right;margin-left:-240px}
#content_inner{height:400px;background:#666;margin-left:240px}
#side{width:230px;height:400px;color:#fff;background:#666;float:left}
#footer{height:50px;color:#fff;background:#666;margin-top:10px}
.clear{clear:both}
</style>
</head>
<body>
<div id="header">顶部</div>
<div id="side">左侧</div>
<div id="content">
<div id="content_inner">右侧</div>
</div>
<div class="clear"></div>
<div id="footer">底部</div>
</body>
</html>

请给出一个左侧定宽右侧自适应的HTML结构及样式的更多相关文章

  1. CSS基础布局--居中对齐，左侧定宽右侧自适应

    CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...

  2. CSS左侧固定宽 右侧自适应（兼容所有浏览器）

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  3. table-cell完成左侧定宽，右侧定宽及左右定宽等布局

    使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...

  4. CSS布局 -- 左侧定宽，右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  5. NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  6. 已知一个函数rand7()能够生成1-7的随机数，请给出一个函数rand10()，该函数能够生成1-10的随机数。

    题目: 已知一个函数rand7()能够生成1-7的随机数,请给出一个函数,该函数能够生成1-10的随机数. 思路: 假如已知一个函数能够生成1-49的随机数,那么如何以此生成1-10的随机数呢? 解法 ...

  7. 请写出一个超链接，点击链接后可以向zhangsan@d-heaven.com发送电子邮件。

    请写出一个超链接,点击链接后可以向zhangsan@d-heaven.com发送电子邮件. <a href=”mailto: zhangsan@d-heaven.com”>发邮件</ ...

  8. css左侧固定宽度，右侧自适应的几种实现方法

    左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的.这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种.要实现这种布局,也算比较简单.我们先给出html结构: <div ...

  9. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

随机推荐

  1. 贴心小技能——纯CSS实现的帮助提示

    1. 新技能传授---哒哒哒哒 我们经常会接到这样的小需求,鼠标放在某个位置实现一段小提示. 你还在用js实现这样一个小功能,你就太out了,来看看我们用纯CSS打造的帮助提示. 2. html &l ...

  2. sql 自定义函数-16进制转10进制

    做过笔记,好记性不如烂笔头: if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[HEXTOINT]') and ...

  3. hdu 1358 KMP的next数据运用

    由于next[i]保存的是前i-1个字符中最大的重复子序列,那么i-next[i]就是循环节. #include<cstdio> #include<cstring> #incl ...

  4. poj 3565 二分图最优匹配

    思路: 将ant与tree之间用距离来做权值,求最小权匹配就可以了.可以想到,如果有两条线段相交,那么将这两个线段交换一个顶点,使其不相交,其权值和一定会更小. 就像斜边永远比直角边长一样的道理. # ...

  5. poj 2446 二分图最大匹配

    思路:由(i+j)为偶数的点向(i+j)为奇数的点建边.求一次最大匹配,若正好为空格数(不包含洞)的一半,即输出YES. #include<iostream> #include<cs ...

  6. C# Windows Service服务的创建和调试

    前言 关于Windows服务创建和调试的文章在网络上的很多文章里面都有,直接拿过来贴在这里也不过仅仅是个记录,不会让人加深印象.所以本着能够更深刻了解服务项目的创建和调试过程及方法的目的,有了这篇记录 ...

  7. Linux 命令 - top: 动态显示进程信息

    命令格式 top -hv | -abcHimMsS -d delay -n iterations -p pid [, pid ...] 命令参数 -a 根据内存的使用排序. -b 以批处理模式操作. ...

  8. 160多个android开源代码汇总

    第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Pro ...

  9. PC电脑运行Android模拟器总是弹出“视频源”窗体的原因和解决方案

    原因: PC电脑运行Android模拟器时弹出“视频源”窗体,会让你"选择视频设备",如:HP TruevIsion HD,而这个视频设备就是你电脑中的内置摄像头,这个内置摄像头在 ...

  10. VBA 将 ANSI 转换为 UTF-8文件

    在使用的时候,先用WriteOut生成一个临时文件(UTF-8带BOM),然后用Convert2utf8将BOM头的前三个字节删除. --------------------------------- ...