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中,我们通常使 ...
随机推荐
- 当each遇上list 的一些困惑
在看手册函数的时候,看到each,如下: array each ( array &$array ) 返回数组中当前的键/值对并将数组指针向前移动一步 在执行 each() 之后,数组指针将停留 ...
- Train Problem I--hdu1022（栈）
Train Problem I Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- SignalR实现实时日志监控
.net SignalR实现实时日志监控 摘要 昨天吃饭的时候,突然想起来一个好玩的事,如果能有个页面可以实时的监控网站或者其他类型的程序的日志,其实也不错.当然,网上也有很多成熟的类似的监控系统 ...
- SQL Server 锁的 8 种类型
第1种. 共享锁.由读取查寻产生. 第2种. 意向锁.用意向锁来表示有将要获得某一资源的意向. 第3种. 更新锁.在修改数据前获得. 第4种. 排它锁.用于独占某一资源时获得. 第5种. 架构锁.运行 ...
- 【写一个自己的js库】 3.添加几个处理字符串的方法
1.生成重复的字符串 if(!String.repeat){ String.prototype.repeat = function (count){ return new Array(count + ...
- NFC-P2P MODE
今日看见有关国内电信业者要合组TSM (Trusted Service Manager)提供NFC 服务的新闻, 这是属于NFC 所能提供的3种Mode中的Card emulation mode (就 ...
- 14.3.5.1 Interaction of Table Locking and Transactions 表锁和事务的相互作用
14.3.5.1 Interaction of Table Locking and Transactions 表锁和事务的相互作用 LOCK TABLES 和UNLOCK TABLES 交互实用事务如 ...
- JavaEE Tutorials (24) - 资源适配器示例
24.1trading示例369 24.1.1使用出站资源适配器370 24.1.2实现出站资源适配器372 24.1.3运行trading示例37324.2traffic示例374 24.2.1使用 ...
- MySQL的零碎知识点
让Windows下的MySQL表名大小写敏感: 在mysql查询中执行:SHOW VARIABLES LIKE 'lower_case_table_names'; 值的含义--->0:大小写敏感 ...
- C#打印条码BarTender SDK打印之路和离开之路（web平凡之路）
从来没想过自己会写一篇博客,鉴于这次从未知的探索到一个个难点的攻破再到顺利打印,很想记录这些点滴,让后人少走弯路. 下面走进正题. 需求:取数据库里的相应的字段数据,并生成条形码,可以批量.单条打印. ...