<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Layout Demo</title>

<style type="text/css">

#left {

	background-color: #F00;

	height: 300px;

	width: 300px;

	float: left;

}

#right {

	background-color: #FF0;

	height: 300px;

	width: 300px;

	top: 0;

	right: 0;

	position: absolute;

}

#main {

	background-color: #999;

	height: 300px;

}

#outbox {

	width: 80%;

	margin-left: auto;

	margin-right: auto;

	position: relative;

	min-width:650px;

}

#outbox2{

	padding-right: 300px;

	float:left;

}

.photo {

	background-color: #00F;

	float: left;

	height: 50px;

	width: 50px;

}

</style>

</head>

<body>

<div id="outbox">

  <div id="outbox2">

    <div id="left"></div>

    <div class="photo"></div>

    <div class="photo"></div>

    <div class="photo"></div>

    <div class="photo"></div>

    <div class="photo"></div>

  </div>

  <div id="right"></div>

  <div id="main"> </div>

</div>

</body>

</html>

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

  1. Layout-2相关代码: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. easyui Tree模拟级联勾选cascadeCheck，节点选择，父节点自动选中，节点取消，父节点自动取消选择，节点选择，所有子节点全部选择，节点取消，所有子节点全部取消勾选

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

  2. Java NIO 入门

    本文主要记录 Java 中  NIO 相关的基础知识点,以及基本的使用方式. 一.回顾传统的 I/O 刚接触 Java 中的 I/O 时,使用的传统的 BIO 的 API.由于 BIO 设计的类实在太 ...

  3. modelSIM仿真ROM核报错

    用Quartus Prime 15.1调用modelSIM进行RTL仿真,modelSIM的transcript框框总是有Failed to Open Readmem File提示. 错误原因:IP核 ...

  4. 网上流行护眼色的RGB值

  5. FileUrl

    package com.rscode.credits.util; import java.io.BufferedReader; import java.io.File; import java.io. ...

  6. JavaScript权威指南--第3章 类型、值和变量

    在编程语言中,能够表示并操作的值(value)的类型称作数据类型(type).使用变量来储存值.JavaScript中数据类型有两种:原始类型(primitive type/基本数据类型)和对象类型( ...

  7. openpyxl工具总结

    1.openpyxl使用 涉及到单元格合并.赋值 ''' .格式转换 raw_data create_data boolean Bool uint8 UInt8 int8 Int8 uint16 UI ...

  8. mininet的学习之一

    mininet命令 (1)--topo (2)--switch (3)--controller (4)--mac 内部交互命令 添加主机 添加链路 添加接口 添加IP 确定是否创建成功 用h1 pin ...

  9. bootstrap研究感想1

    我—>新人,特纯的新人,受到方大神的建议,开始写博客,写一些工作时敲代码时的感受,学习模仿大神时的感悟. -------------------------------------------- ...

  10. 软件开发者路线图梗概&书摘chapter5

    恒久学习:整个职业生涯,反馈回路,了解弱点 1.提高带宽:多维度.高效获取知识 博客.关注twitter动态.订阅邮件列表.加入本地用户组.技术大会.联系书的作者.在线教程 从信息的海洋中回到实际软件 ...