<!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. php7-编译安装参数

    ./configure \--with-fpm-user=www \--with-fpm-group=www \--prefix=/usr/local/php7 \--with-config-file ...

  2. D1——初读《Head First Java》

    今天随便看了点<Head First Java>,发觉这本书的风格真是有趣.打算先把这本书踏踏实实的看了.学习切忌好高骛远.心浮气躁,尤其入门基础阶段更应该踏踏实实地学习知识.下面随便谈谈 ...

  3. 测试那些事儿-软测必备的linux知识(五)

    1.进程管理 1.1进程概述 在Linux中,每个执行的程序都称为一个进程,每个进程都分配一个ID号 每个进程,都会对应一个父进程,这个父进程可以复制多个子进程, 每个进程可能以两种方式存在,前台与后 ...

  4. Django_web框架的理解

    web框架的本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 80)) sk.listen() while T ...

  5. ubuntu下cannot find lib....so.x 寻找动态链接库

    默认从/lib . /usr/lib 以及配置文件/etc/ld.so.conf内所列的目录下加载.so文件, 进而创建出动态装入程序(ld.so)所需的连接和缓存文件. 缓存文件默认为/etc/ld ...

  6. Linux可以生产uImage

    默认kernel只生产Image和zImage,若想让kernel生产uImage,需要用到mkimage,这个是uboot可以提供的,位于uboot/tool/目录下,将其加入到环境变量即可.

  7. 窗函数法设计FIR滤波器参数特征表

  8. java标识符、修饰符和关键字

    一.标识符 1.概念:标识符好比人和物的姓名,java中标识符就是类.对象.方法.变量.接口和自定义数据类型等等的名字. 2.规则: (1)首位不能是数字. (2)标识符对大小写敏感. (3)不可以是 ...

  9. find命令简单使用

    find命令是Linux系统查找文件的命令,能帮助用户在使用.管理Linux的日常事务时方便的查找出用户所需要的文件,find命令基本格式是:find [路径] [选项] [操作]. 列举一下find ...

  10. Scrapy 代理IP

    Scrapy 代理IP 一.Scarpy使用代理IP 1.在setting.py 配置 代理服务器IP 2.在middlermares.py 配置 downloadmiddlermare(下载中间件) ...