<!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. Cartographer安装

    安装过程: 官方安装教程: https://google-cartographer-ros.readthedocs.io/en/latest/index.html # Install wstool a ...

  2. 湖南大学第十四届ACM程序设计新生杯（重现赛）I：II play with GG（博弈论||DP）

    链接:https://ac.nowcoder.com/acm/contest/338/I 来源:牛客网 题目描述 IG won the S championship and many people a ...

  3. 零基础python入门（1）

    1.前景及准备 (1).python是一门简单易学且功能强大的编程语言.它拥有高效的高级数据结构,并且能用简单而又高效的方式进行面向对象的编程.python优雅的语法和动态的类型,再结合它的解释性,使 ...

  4. 锋利的jQuery初学（5）

    层级选择器: 层级选择器 符号 解释 使用 空格 后代选择器 $("div p").css("","") + 紧邻选择器 $("d ...

  5. Ajax的工作原理以及优缺点

    Ajax的工作原理 : 相当于在客户端与服务端之间加了一个抽象层(Ajax引擎),使用户请求和服务器响应异步化,并不是所有的请求都提交给服务器,像一些数据验证和数据处理 都交给Ajax引擎来完成,只有 ...

  6. 简述rpm与yum命令的常见选项

    rpm是一个功能十分强大的软件包管理系统,它使得在Linux下安装.升级和删除软件包的工作变的容易.并且具有查询.验证软件包的功能. 1)安装选项 命令格式:rpm {-i|--install} [i ...

  7. 《python for data analysis》第二章，美国1880-2010年出生人口姓名的数据分析

    <利用python进行数据分析>第二章的姓名例子,代码.整个例子的所有代码集成到了一个文件中,导致有些对象名如year同时作为了列名与行名,会打印warning,可分不同的part依次运行 ...

  8. [双系统linux] ----安装完成后无法打开wifi

    在安装了linux 双系统以后发现无法打开wifi和蓝牙. rfkill list all 0:ideapad_wlan: Wireless LANSoft blocked: noHard block ...

  9. docker(基础篇)

    http://naotu.baidu.com/file/f02773930afb2d3d9e71621249099d31 centos7安装  https://yq.aliyun.com/articl ...

  10. Nginx failing to load CSS and JS files (MIME type error)

    Nginx failing to load CSS and JS files (MIME type error) Nginx加载静态文件失败的解决方法(MIME type错误) 上线新的页面,需要在n ...