<!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. 往redis中存储数据是利用pipeline方法

    在redis中保存数据时,保存和设置有效时间是分开写的话,如果中间出现的异常,这会导致数据永久有效,因此就可以采用pipeline方法. # 创建redis管道对象,可以一次执行多个语句 pipeli ...

  2. DateGridView控件与mysql交互

    private void dgv() { //Ip+端口+数据库名+用户名+密码 string connectStr = "server=127.0.0.1;port=3306;databa ...

  3. Vue基础之数据绑定

    我们学习一门新语言或者框架时,第一件事是什么呢,那必然是向世界say Hello. 创建一个Vue应用 话不多说,先上代码,让我们感受一下Vue的核心功能 <!DOCTYPE html> ...

  4. Codeforces 977E：Cyclic Components（并查集）

    题意 给出nnn个顶点和mmm条边,求这个图中环的个数 思路 利用并查集的性质,环上的顶点都在同一个集合中 在输入的时候记录下来每个顶点的度数,查找两个点相连,且度数均为222的点,如果这两个点的父节 ...

  5. java——————基础总结2

    一 程序中常见的错误: 1,语法错误 2, 逻辑错误 3,运行时错误 二 定义class类的时候,如果前面加个public 那么class的类名必须要和文件名一致,否则就会 出现编译错误 三 编译源文 ...

  6. javascript第一个作业之网页计算器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. C++实现简单学生管理系统

    在网上看到的一个C++的小项目,我自己码了一遍,然后记录下我的理解以及像我这种菜鸟在整个过程中产生的问题. 我将我知道的尽可能详细的写下来,如有错误请联系我哈,QQ:920209178. 原文地址:h ...

  8. C# 枚举用法

    public static class EnumExtensions { public static string GetDescription(this Enum value) { return v ...

  9. 批量镜像locator（比如表情模板）

    #外挂   镜像loc     前缀  lf  镜像给   rt   选中其中一个会镜像另一个 myPrefix='lf_'myMdf='rt_' myselectLoc=mc.ls(sl=1)for ...

  10. 控制使用jquery load()方法载入新页面中的元素

    最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...