<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

.right,.left{height:300px;width:200px;}

.right{ float:right;background:#000000;}

.left{ float:left;background:#009933;}

.main{background:#F60; height:300px;}

</style>

</head>

<body>

<div class="right">RIGHT</div>

<div class="left">LEFT</div>

<div class="main">MAIN</div>

</body>

</html>

代码演化2:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

.right, .left {

	height: 300px;

	width: 200px;

}

.right {

	float: right;

	background: #000000;

	margin-right:10%;

}

.left {

	float: left;

	background: #009933;

	margin-left:10%;

}

.main {

	background: #F60;

	height: 300px;

	margin:0 10%;

}

</style>

</head>

<body>

  <div class="right">RIGHT</div>

  <div class="left">LEFT</div>

  <div class="main">MAIN</div>

</body>

</html>

代码演化3:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#outbox {

	width: 80%;

	margin-right: auto;

	margin-left: auto;

	min-width:500px;

}

.right, .left {

	height: 300px;

	width: 200px;

}

.right {

	float: right;

	background: #000000;

}

.left {

	float: left;

	background: #009933;

}

.main {

	background: #F60;

	height: 300px;

}

</style>

</head>

<body>

<div id="outbox">

  <div class="right">RIGHT</div>

  <div class="left">LEFT</div>

  <div class="main">MAIN</div>

</div>

</body>

</html>

代码演化4：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Layout</title>

<style type="text/css">

* {

	margin: 0;

	padding: 0;

}

body {

	position: relative;

}

.right, .left {

	height: 300px;

	width: 200px;

	z-index: 2;

}

.right {

	position: absolute;

	right: 0;

	top: 0;

	background: #000000;

}

.left {

	position: absolute;

	left: 0;

	top: 0;

	background: #009933;

}

.main {

	margin-right: 200px;

	background: #F60;

	height: 300px;

	margin-left: 200px;

}

</style>

</head>

<body>

<div class="main">main</div>

<div class="left">LEFT</div>

<div class="right">RIGHT</div>

</body>

</html>

Layout-2相关代码:3列布局代码演化[一]的更多相关文章

  1. Layout-3相关代码:3列布局代码演化[二]

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Layout-3相关代码:3列布局代码演化三]

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. CSS多列布局（实例）

    前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...

  4. 【Android】纯代码创建页面布局（含异步加载图片）

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  5. Android利用setLayoutParams在代码中调整布局(Margin和居中)

    我们平常可以直接在xml里设置margin,如: <ImageView android:layout_margin="5dip" android:src="@dra ...

  6. Layout 不可思议（二）—— 两侧定宽的三列布局

    三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...

  7. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  8. java文件夹相关操作 演示样例代码

    java文件夹相关操作 演示样例代码 package org.rui.io; import java.io.File; import java.io.FilenameFilter; import ja ...

  9. 使用Auto Layout中的VFL(Visual format language)--代码实现自动布局

    使用Auto Layout中的VFL(Visual format language)--代码实现自动布局 2014-12-09 10:56 编辑: zhiwupei 分类:iOS开发 来源:机智的新手 ...

随机推荐

  1. jQuery-4.动画篇---自定义动画

    jQuery中动画animate(上) 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了 操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别 $(e ...

  2. 改变highCharts的X轴和Y轴的数据刻度

    xAxis:{ tickPixelInterval:10 //自行调整X轴刻度的间距}, yAxis:{ lineWidth:1, //Y轴默认不显示Y轴线,添加一个轴线的宽度就可以显示出来 tick ...

  3. Windows下部署Apache RocketMQ

    一:环境准备: Windows.JDK1.8+.Maven.Git 二:RocketMQ准备:  1.http://rocketmq.apache.org/release_notes/release- ...

  4. 在Ubuntu下安装lrzsz

    目录 自动安装 手动安装 下载 解压 安装 创建连接 在Ubuntu 14.04x64下安装lrzsz 自动安装 在终端中,输入命令 sudo apt-get install lrzsz 由于一些原因 ...

  5. Python基础：二、python介绍

    Python崇尚优美.清晰.简单,是一个优秀并广泛使用的语言 python的创始人为GuidovanRossum.1989年圣诞节期间,Guido再阿姆斯特丹未来打发时间,决心开发一个新的脚本解释程序 ...

  6. python随机数学习笔记

    #coding:utf-8 import random # random.randint(1,10)产生1,10的随机整数 for i in range(1,5): ranint = random.r ...

  7. css格式

    <head> <style>body {color:#000000;font-weight:normal;} .c1{ color: #fff; background-colo ...

  8. winmount导致资源管理器崩溃

    今天,在别人电脑上遇到一个问题,右键点击某个特定文件夹会导致资源管理器崩溃重启,提示为: Runtime Error! Program: C:\Windows\Explorer.exe This ap ...

  9. 第四节 Python基础之数据类型（集合）

    在学习本节之前,我们先对数据类型做一个补充,也就是数据类型的分类: 按照可变和不可变来分: 可变:列表,字典 不可变:数字,字符串,元组 按照访问顺序来分: 顺序访问:字符串,列表,元组 映射的方式访 ...

  10. git 本地修改、撤消操作

    // 撤消本地文件的修改,还原到最近版本 git checkout -- * 是撤销从上次提交之后所做的所有修改 git checkout -- <filaname> 是撤销从上次提交之后 ...