<!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. Vue中实现与后台的数据交换（vue-resource）

    vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.(但是目前它已经停止更新了) 1.在vue中安装vue-resource插件 打 ...

  2. 多线程系列之自己实现一个 lock 锁

    我们面试中经常会被问到多线程相关知识,这一块内容往浅了说大家都会,但是一问到底层实现原理,我们往往就一脸懵逼. 这段时间准备好好学习多线程,接下来会写一系列关于多线程的知识. 我们首先要了解线程,百度 ...

  3. Python:从入门到实践--第十一章--测试代码--练习

    #1.城市和国家:编写一个函数,它接受两个形参:一个城市名和一个国家名. #这个函数返回一个格式为City,Country的字符串,如Santiago,Chile.将这个函数 #存储在一个名为city ...

  4. leetcode 刷题（2）--- 两数相加

    给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例: 输入:(2 -& ...

  5. Sql Server 2005/2008数据库被标记为“可疑”/“质疑”的问题

    日常对Sql Server 2005关系数据库进行操作时,有时对数据库(如:Sharepoint网站配置数据库名Sharepoint_Config)进行些不正常操作如数据库在读写时而无故停止数据库,从 ...

  6. java面试题03

    1.一个”.java”源文件中是否可以包含多个类(不是内部类)?有什么限制?一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制?这个是可以的,一个“.java” ...

  7. bzoj 4589 FWT

    #include<bits/stdc++.h> #define ll long long using namespace std; ; ; ; ; <<],b[<< ...

  8. 网络操作基础（two）

    P106 一.什么是活动目录?活动目录有哪些优点? 二.什么是域.域树.森林? 三.什么是信任?什么是域的方向及传递性? 四.如何管理活动目录的信任与站点? 解答! (一) 1.活动目录:提供了用于存 ...

  9. Python基础：七、注释

    有时候我们写的东西不一定都是给用户看的,或者不希望解释器执行(方便自己,方便他人),我们可以使用#来注释掉代码被注释的内容是不会执行的,可以方便后面的程序员来拜读你的代码. 1. 单行注释:#被注释的 ...

  10. 简单尝试利用维控LeviStudioU的一栈缓冲区溢出漏洞

    这是别人给我发的,让我分析一下,看能否写出exp.只怪自己水平不够,最后没能写出exp,以下为自己的分析思路 环境为win10 pro x64 英文版(10.0.16299) 默认安全配置 一.漏洞分 ...