Layout-3相关代码:3列布局代码演化[二]
<!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列布局代码演化[二]的更多相关文章
- Layout-2相关代码:3列布局代码演化[一]
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Layout-3相关代码:3列布局代码演化三]
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS多列布局（实例）
前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...
- 【Android】纯代码创建页面布局（含异步加载图片）
开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...
- Android利用setLayoutParams在代码中调整布局(Margin和居中)
我们平常可以直接在xml里设置margin,如: <ImageView android:layout_margin="5dip" android:src="@dra ...
- Layout 不可思议（二）—— 两侧定宽的三列布局
三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...
- 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- java文件夹相关操作 演示样例代码
java文件夹相关操作 演示样例代码 package org.rui.io; import java.io.File; import java.io.FilenameFilter; import ja ...
- 使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
使用Auto Layout中的VFL(Visual format language)--代码实现自动布局 2014-12-09 10:56 编辑: zhiwupei 分类:iOS开发 来源:机智的新手 ...
随机推荐
- vue.js 精学记录
v-bind:class使用的方式: 1.对象与法::class="{'active':isActive}" 此时当isActive为true时,会拥有active 2.数组语法: ...
- python中shutil模块的使用
可以操作权限的处理文件模块:shutil # 基于路径的文件复制 import shutil shutil.copyfile("oldfile_path","newfil ...
- windows下用XShell远程控制ubuntu时连接失败
主机和Ubuntu可以相互Ping通,但是XShell远程控制失败. 查看Ip地址方法:ifconfig 解决方案: 1.查看,关闭防火墙状态:sudo ufw disable 2.开放22端口:su ...
- 什么是C/S模式与B/S模式，两者区别与优缺点
转自https://wenwen.sogou.com/z/q1709598292.htm C/S (Client/Server,客户机/服务器)模式又称C/S结构,是软件系统体系结构的一种.C/S模式 ...
- Python之字符串函数str()
str()方法使Python将非字符串值表示为字符串: age = 23 message = "Happy" + str(age) +"rd Birthday"
- Windows 上安装 Azure PowerShell及Azure PowerShell部署虚拟机
一.Azure PowerShell部署 1.使用 PowerShellGet 在 Windows 上安装 Azure PowerShell 从 Azure PowerShell 版本 6.0 开 ...
- SDL2.0.9源码分析
1.首先 2.0.9编译so出来跟一直不一样,多了个hidapi 库 2.跟Tocy的对比,SDLmain 执行的路径不一样,一个是/src/main/android/SDL_android_mai ...
- 使用bind提供域名解析服务
- [NLP]非终结字符集&终结字符集
参考:终结符和非终结符 终结字符集: 不能单独出现在推导式左边的符号, 不能够再继续推导. 非终结字符集: 不是终结字符集中的符号都为非终结字符集. 是可拆分元素. 例子: 文法如下: S->A ...
- 20175202 《Java程序设计》第九周学习总结
20175202 2018-2019-2 <Java程序设计>第九周学习总结 教材知识点总结 第11章 JDBC与MySQL数据库 MySQL数据库管理系统 MySQL数据库管理系统,简称 ...