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开发 来源:机智的新手 ...
随机推荐
- css flex方法标题左右两边平衡线
<html> <div class="title"> <div class="line"></div> < ...
- chrome中安装.crx后缀的离线插件
在前端开发中常常需要在chrome中安装一些插件辅助开发,比如最常用的Postman.React Developer Tools.Vue.js devtools等等...今天分享一下不需要“FQ”的插 ...
- 用vs2010打开使用vs2013升级后的WP工程
项目在win7+vs2010的环境中建立的,后来在win8.1+vs2013的环境下修改和完善: 但是所有功能实现后发现wp7项目在使用vs2013打开后因为单向升级的原因,项目只能被编译为wp8项目 ...
- Ubuntu系统安装Transmission
虚拟机Ubuntu 16.10 Transmission 2.92(https://launchpad.net/~transmissionbt/+archive/ubuntu/ppa) 一.添加源 s ...
- miniui的联动列表
function OnCellBeginEdit(e) { var grid = e.sender; var column = e.column; if (!column.parentfield) { ...
- flutter 容器 几种写法
1.Stack: 取代线性布局 (译者语:和Android中的LinearLayout相似),Stack允许子 widget 堆叠, 你可以使用 Positioned 来定位他们相对于Stack的上下 ...
- 用寄快递模拟数据在网络中的传送过程，发送一个ip数据报到接受这个ip数据报经历的过程
发送一个ip数据报到接受这个ip数据报经历的过程 好比寄一个快递的过程 这个包裹一共有三层, 这个包裹的最里面是数据,数据 第二层写着目的ip地址和源ip地址,即收件人和发件人的姓名 第三层也就是最外 ...
- JS:Math 对象方法
Math 对象方法方法 描述Math.ceil(x) 对数进行上舍入.(向上取整:大于等于x的最小整数)Math.floor(x) 对数进行下舍入.(小于等于x的最大整数)Ma ...
- JQuery操作属性、样式、风格(attr、class、css)
样式操作 <p class="myclass" title="选择喜欢的水果">你最喜欢的水果是?</p> 在上面代码中,class也是 ...
- ajax高级操作
$('#ajax_submit').click(function () { $.ajax({ 'url':'/app_ajax', 'type':'post', 'data':$("#f1& ...