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中,我们通常使 ...
随机推荐
- 验证角谷猜想（hd1279）
验证角谷猜想 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- NDK 的helloworld步奏
1. helloworld.c #include <string.h> #include <jni.h> /* * Class: com_example_ndk_NativeH ...
- Spring Boot 部署与服务配置
Spring Boot 其默认是集成web容器的,启动方式由像普通Java程序一样,main函数入口启动.其内置Tomcat容器或Jetty容器,具体由配置来决定(默认Tomcat).当然你也可以将项 ...
- URL组成介绍
1.2. HTTP request ----------------- First, let's consider this HTTP request : Line Contents number 1 ...
- iOS 监听 出发 Home键 NSNotificationCenter UIApplicationWillResignActiveNotification
第一步: 创建2个NSNotificationCenter监听 [[NSNotificationCenter defaultCenter] addObserver:self selector:@sel ...
- HDU2842-Chinese Rings(递推+矩阵高速幂)
pid=2842">题目链接 题意:求出最少步骤解出九连环. 取出第k个的条件是,k-2个已被取出,k-1个仍在支架上. 思路:想必九连环都玩过吧,事实上最少步骤就是从最后一个环開始. ...
- javascript常用的内置对象实用操作
1.indexOf() 方法 -----这个方法比较常用 返回某个指定的字符串值在字符串中首次出现的位置 使用格式:stringObject.indexOf(substring, startpos) ...
- struts 2 debug标签隐藏不显示
struts2 的标签debug在页面中应用,并且struts的配置文件中也设置为开发模式,但是这个标签却被隐藏了,究其原因,是因为页面中body元素生命了class,其样式覆盖了原来的样式. 比如: ...
- Jquery揭秘系列：谈谈bind,one,live,delegate,on事件及实现
在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...
- 【转】Android的线程使用来更新UI----Thread、Handler、Looper、TimerTask
方法一:(java习惯,在android不推荐使用) 刚刚开始接触android线程编程的时候,习惯好像java一样,试图用下面的代码解决问题 new Thread( new Runnable() { ...