左中右布局经典案例

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<style type="text/css">

body{margin: 0px;}

#divLeft{width:100px;height:800px;float: left;margin:0px;background-color:#8ADEFF;}

#divCenter{width:100%;height:800px;margin:0px auto;background-color:red}

#divRight{width:100px;height:800px;float: right;margin:0px;background-color:pink;}

</style>

<title>左中右</title>

</head>

<body>

<div id="divLeft">

左边的

</div>

<div id="divRight">

右边的

</div>

<div id="divCenter">

中间

</div>

</body>

</html>

时间: 2024-10-11 13:07:25

左中右布局经典案例的相关文章

css布局之左中右结构总结

结构说明:左右两部分宽度固定,中间的部分填充剩余所有宽度.常用场景:最左边摆放一张图片,中间摆放说明性文字,右边摆放相关操作的小图标.之前的做法虽然有实现但是不完美.思路如下(简单描述为左中结构):首先考虑中间的要拉伸铺满剩下的宽度,必须宽度设置成百分比100%,用box-sizing设置为border-box,然后配合padding,给左右留固定的宽度,左右的内容放到padding区域与其重叠,使用float浮动是不能重叠的,所以一定要有一个是绝对定位,全部都使用绝对定位是没有问题的,但是绝对

多线程十大经典案例之一 双线程读写队列数据

本文配套程序下载地址为:http://download.csdn.net/detail/morewindows/5136035 转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8646902 欢迎关注微博:http://weibo.com/MoreWindows 在<秒杀多线程系列>的前十五篇中介绍多线程的相关概念,多线程同步互斥问题<秒杀多线程第四篇一个经典的多线程同步问题>及解决多线程同步互斥的常用方法

java多线程经典案例

/** * 典型案例:子线程执行10次,主线程执行100次,两者交替50次. */ package cn.itcast.lesson4; public class TestWaitNotify { public static void main(String[] args){ final Business business= new Business(); new Thread( new Runnable() { public void run() { for(int i=1;i<=50;i++

秒杀多线程第十六篇 多线程十大经典案例之一 双线程读写队列数据

版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 本文配套程序下载地址为:http://download.csdn.net/detail/morewindows/5136035 转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8646902 欢迎关注微博:http://weibo.com/MoreWindows 在<秒杀多线程系列>的前十五篇中介绍多线程的相关概念,多线程同步互斥问题<秒杀多

网络机器人的识别与攻防的经典案例

本文我们介绍一个网络机器人的识别与攻防的经典案例.使用到的代码见本人的superword项目: https://github.com/ysc/superword/blob/master/src/main/java/org/apdplat/superword/tools/ProxyIp.java 我们的目的是要使用机器人自动获取站点http://ip.qiaodm.com/ 和站点http://proxy.goubanjia.com/ 的免费高速HTTP代理IP和端口号. 不过他们未对机器人进行识

等高左中右结构

原理: “margin-bottom:-1000px;”和“padding-bottom:1000px;” 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <style type="text/css"> body{margin:0;} #all{     width:700px;     margin:

拍卖行与邮件系统——设计者与开发者协作的经典案例

此文仅代表作者本人观点,如有槽点,欢迎吐槽. 设计者与开发者 设计者与开发者,游戏行业内直白的说法就是策划.美术跟程序.但不管在任何行业,这两者之间的关系都既像战友又像敌人.设计者的想法往往是完美的,而开发者的想法却是实际的,就好像梦想与现实一样.我听说过这样的话:美术设计的效果是100%的话,程序呈现出的效果能达到80%就已经很完美了.这当然不是在黑程序,程序出于某些原因无法完全实现效果(资源尺寸,资源通用性,性能考虑等等),毕竟梦想和现实是有差距的.在此案例中,我们仅讨论策划与程序. 拍卖行

(Mirage系列之八)Mirage经典案例之数据更新和恢复

在(Mirage系列之四)Mirage经典案例之集中桌面管理中我们介绍过,Mirage将客户端的数据根据策略备份到服务器上.备份数据的一个最重要的目的就是用户数据恢复,这次我们来讲如何从客户端恢复用户数据. 从客户端恢复用户数据,有以下几种情况: 1.      把文件恢复到以前的某个版本 2.      从存档中恢复文件和文件夹 3.      恢复删除的文件和文件夹 这里,存档指客户端在服务器上的备份.服务器会根据策略按预定的间隔备份客户端数据,从而产生多个存档. 以上三种方式本质上都是一样

(Mirage系列之七)Mirage经典案例之管理和发布应用层

在(Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析中我们介绍过,Mirage从逻辑上把终端桌面分层了三层:系统层(包括驱动和基础层),应用层,以及用户数据层.在(Mirage系列之五)Mirage经典案例之桌面驱动和基础层管理中我们讲到Mirage可以灵活方便的管理终端的驱动并且发布基础层.本文将介绍Mirage如何管理终端的应用层. 一个公司往往有很多部门,各部门所需要的工作软件也不尽相同.Mirage通过分层这个核心技术,将应用层剥离出来,使得管