CSS左中右布局，规范案例
html部分
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="header">header</div>
<div id="container">
<div id="left_side">left_side</div>
<div id="content">content</div>
<div id="right_side">right-side</div>
</div>
<div id="footer">footer</div>
</div>
</form>
</body>
css部分
<style type="text/css">
#wrap{
width:700px;
margin:0 auto;
}
#header{
margin:20px;
height:80px;
border:solid 1px #0000FF;
}
#container{
position:relative;
margin:20px;
height:400px;
}
#left_side{
position:absolute;
top:0px;
left:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
#content{
margin:0px 190px 0px 190px;
border:solid 1px #0000FF;
height:100%;
}
#right_side{
position:absolute;
top:0px;
right:0px;
border:solid 1px #0000FF;
width:170px;
height:100%;
}
#footer{
margin:20px;
height:80px;
border:solid 1px #0000FF;
}
</style>
说明
1、在#container中设置“position:relative;”，其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准。
2、左侧列#left_side和右侧#right_side列采用绝对定位，并且固定这两个div的宽度，而中间列#content由于需要根据浏览器自动调整，因此不设置类似属性。
但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px。
CSS左中右布局，规范案例的更多相关文章
- android RelativeLayout实现左中右布局
RelativeLayout实现左中右布局 <RelativeLayout android:layout_width="match_parent" android:lay ...
- css Position 上下左中右布局
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- RelativeLayout实现左中右布局
<RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_co ...
- 典型的DIV＋CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Def ...
- 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局
前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...
- CSS多列布局（实例）
前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...
- css学习_css布局案例
1.中间栏先加载 !!!(若不是这个条件的话 ,那可以用 calc 或者flex布局来实现 中间栏自适应,左右栏定宽) 2.中间栏自适应 width:100% 3.左右栏固定宽 左中右 ...
- css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- CSS定位与布局
我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.PC端常见的网页布局形式有两列布局.三列布局等.在CSS中,我们通常使 ...
随机推荐
- View的工作原理（二）——layout
1.当View的measure被确定后,会调用ViewGroup的layout方法,之后使用onLayout方法(同样也是系统未自动重写,要我们自己完成)遍历子View(根Measure的形式是一样得 ...
- Python 在Windows下安装matplotlib
windows下安装很麻烦,使用easy_install 安装报错 提示缺少freetype 和png 后经多方查询,最终安装成功 以下是安装过程 前提你的Python环境已经搭建好了 1.前提需要 ...
- 经典面试题（二）附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯
1.正整数序列Q中的每个元素都至少能被正整数a和b中的一个整除,现给定a和b,需要计算出Q中的前几项, 例如,当a=3,b=5,N=6时,序列为3,5,6,9,10,12 (1).设计一个函数void ...
- USB device & USB controller & USB passthrough
目录 USB device USB controller Linux 相关命令 Python 相关库 Libvirt USB passthrough 参考资料 近期往 openstack 里倒腾 US ...
- delphi 修改代码补全的快捷键(由Ctrl+Space 改为 Ctrl + alt + Space)（通过修改OpenTool生效）
delphi 的IDE快捷键与输入法切换键中突,以往的解决方法是下载一个ImeTool修改 windows 系统的快捷键 在 xp win7 都好使,但在win 10经常是修改完后,重启又失效了. 本 ...
- Unix/Linux环境C编程入门教程(28) 日期时间那些事儿
记得这个专题第一篇我们写过一个程序运行时间的程序,采用库函数提供的clock()模拟做程序测试.本篇介绍的函数也是和时间相关,但是没有clock的细致,而是提供的系统时间和日期. 1.asctime( ...
- 解决jQuery.live在mobile safari（iphone / ipad / ipod）绑定失败的问题
解决方案: 给要使用live绑定事件的元素,添加“cursor:pointer”样式即可! 如: a,input,td{cursor:pointer;}
- UVA 1610 Party Games
题意: 给出一系列字符串,构造出一个字符串大于等于其中的一半,小于另一半. 分析: 取大小为中间的两个a,b(a<b).实际上就是找出第一个小于b的同时大于等于a的字符串,直接构造即可. 代码: ...
- json输出用法+jquery validate
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- adb server didn t ack failed to start daemon
关掉Ecilpse,打开cmd命令行 1)cd到sdk的platform-tools目录下, 2)执行 adb kill-server ,出现 server not runing 提示 3)执行 ...