请给出一个左侧定宽右侧自适应的HTML结构及样式
<!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结构及样式的更多相关文章
- CSS基础布局--居中对齐，左侧定宽右侧自适应
CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一 ...
- CSS左侧固定宽 右侧自适应（兼容所有浏览器）
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- table-cell完成左侧定宽，右侧定宽及左右定宽等布局
使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...
- CSS布局 -- 左侧定宽，右侧自适应
左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...
- NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应
CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
- 已知一个函数rand7()能够生成1-7的随机数，请给出一个函数rand10()，该函数能够生成1-10的随机数。
题目: 已知一个函数rand7()能够生成1-7的随机数,请给出一个函数,该函数能够生成1-10的随机数. 思路: 假如已知一个函数能够生成1-49的随机数,那么如何以此生成1-10的随机数呢? 解法 ...
- 请写出一个超链接，点击链接后可以向zhangsan@d-heaven.com发送电子邮件。
请写出一个超链接,点击链接后可以向zhangsan@d-heaven.com发送电子邮件. <a href=”mailto: zhangsan@d-heaven.com”>发邮件</ ...
- css左侧固定宽度，右侧自适应的几种实现方法
左侧固定,右侧自适应或者右侧固定在,左侧自适应是一样的.这种布局很常见,而且面试过程中也经常会问到,这里我总结的方法一共有5种.要实现这种布局,也算比较简单.我们先给出html结构: <div ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
随机推荐
- webView中支持input的file的选择和alert弹出
alert()弹出 input的file现选择(特别说明:不同的android版本弹出的样式不同,选择文件后自动上传) webView.setWebChromeClient(new WebChrome ...
- 转：OpenResty最佳实践(推荐了解lua语法)
看点: 1. Lua 语法的说明, 排版清晰易懂. 转: https://moonbingbing.gitbooks.io/openresty-best-practices/content/lua/m ...
- poj3393[模拟题]
Lucky and Good Months by Gregorian Calendar Time Limit: 1000MS Memory Limit: 65536K Total Submissi ...
- Java Concurrency - Lock
Lock 是 Java API 提供的另一种线程同步机制,它提供了比 synchronized 关键字更为灵活.强大的锁定操作. 锁是控制多个线程对共享资源进行访问的工具.通常,所提供了对共享资源的独 ...
- cocos2dx-lua class语法糖要注意了
cocos2dx-lua function.lua 定义了class方法,让lua实现继承像传统语言一样漂亮和方便 看定义 function class(classname, super) local ...
- 承接VR/AR内容应用定制需求
业务范围: 1 承接VR/AR内容应用定制需求: 教育培训.建筑建设.旅游体验.课件教学系统.交通车辆仿真,模拟驾驶系统.游戏等.2 各类最新VR设备,例如GearVR.HTC vive.Oculus ...
- linux ubuntu vsftp 默认主目录
vi /etc/passwd 查看/ftp: 后面的目录就是默认目录 这是匿名用户的目录 --------------------------- 使用linux 别的用户,默认在/home/用户名 ...
- Android开发之如何保证Service不被杀掉（前台服务）
序言 最近项目要实现这样一个效果:运行后,要有一个service始终保持在后台运行,不管用户作出什么操作,都要保证service不被kill.参考了现今各种定制版的系统和安全厂商牛虻软件,如何能保证自 ...
- Java流的正确关闭方式
因为流是无论如何一定要关闭的,所以要写在finally里.如下: BufferedReader reader = null; try { reader = (BufferedReader) getRe ...
- xamarin.ios 豆瓣电台视频教程
视频中提到的网址: http://www.sufeinet.com/thread-655-1-1.html https://github.com/akfish/fm-terminal/blob/dev ...