<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

.right,.left{height:300px;width:200px;}

.main{float:left;width:100%;background:#F60; height:300px;}

.left{float:left;background:#009933}

.right{ float:right;background:#000000;margin-left:-200px;}

</style>

</head>

<body>

<div class="main">

<div class="left">left</div>

 MAIN</div>

<div class="right">RIGHT</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网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  4. CSS多列布局（实例）

    前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...

  5. DIV+CSS 网页布局之：三列布局

    1.宽度自适应三列布局 三列布局的原理和两列布局的原理是一样的,只不过多了一列,只需给宽度自适应两列布局中间再加一列,然后重新计算三列的宽度,就实现了宽度自适应的三列布局. 同样的道理,更多列的布局, ...

  6. 【Android】纯代码创建页面布局（含异步加载图片）

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  7. Android利用setLayoutParams在代码中调整布局(Margin和居中)

    我们平常可以直接在xml里设置margin,如: <ImageView android:layout_margin="5dip" android:src="@dra ...

  8. Layout 不可思议（二）—— 两侧定宽的三列布局

    三列布局作为网页设计中最常见的布局,其实现方法早已被诸位前端大神摸透 网上相关的文章很多,原本已无必要再做赘述 不过既然开了 Layout 系列,三列布局就是必修课 本文整理了一些常用的实现方法,然后 ...

  9. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

随机推荐

  1. ffmpeg推送直播流的技术进展

    首先安装好NGINX并打开服务 然后安装好ffmpeg 然后参考:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=2879051 ...

  2. 【Paywave】VISA Paywave - ICS category selection

    [ICS category Selection] PCDA & IRWIN compliantContact InterfaceMagnetic Stripe TransactionConta ...

  3. Sqlite 参数化 模糊查询 解决方案

    转自:https://codedefault.com/2018/does-dapper-support-the-like-operator-in-csharp-application 问题描述 如题, ...

  4. Java基于opencv实现图像数字识别(五)—腐蚀、膨胀处理

    腐蚀:去除图像表面像素,将图像逐步缩小,以达到消去点状图像的效果:作用就是将图像边缘的毛刺剔除掉 膨胀:将图像表面不断扩散以达到去除小孔的效果:作用就是将目标的边缘或者是内部的坑填掉 使用相同次数的腐 ...

  5. angular js 初学

    1 angularJS的一些概念 AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 是一个 JavaScript 框架,它是一个以Javascript编写的库,它可通过 ...

  6. 第一次实验： CC2530平台上电源管理与休眠

    实验一 CC2530平台上电源管理与休眠 实验目的: 加深和巩固学生对于TinyOS编程方法的理解和掌握 让学生初步的认识TinyOS编程的基础和简单的程序编写 学生通过本实验能够初步的了解和掌握Ti ...

  7. MySQL-02-进阶

    大纲 1)数据约束 2)数据库设计(表设计) 3)存储过程 4)触发器 5)mysql权限问题 数据约束 2.1什么数据约束 对用户操作表的数据进行约束 2.2 默认值 作用: 当用户对使用默认值的字 ...

  8. 浅谈兔兔对Object.defineProperty的理解

    给一个对象定义一个新的属性或者在修改一个对象现有的属性,并返回这个对象 语法: Object.defineProperty(参数1,参数2,参数3) 参数1:目标对象 参数2:要修改或者添加的属性名称 ...

  9. LeetCode 104. Maximum Depth of Binary Tree C++ 解题报告

    104. Maximum Depth of Binary Tree -- Easy 方法 使用递归 /** * Definition for a binary tree node. * struct ...

  10. ubuntu 上安装node.js 的简单方法

    一.安装 1.$ sudo apt-get install nodejs 2.$ sudo apt-get install npm 二.升级     1.升级npm命令如下: $ sudo npm i ...