<!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. centos7 ,windows7 grub2 双系统引导

    因为原先的windows7 和 centos6.3 安装在一台笔记本上.因为centos6.3不能识别无线网卡,在网上找了找,要升级内核到3.2以上. 因为本人初级水平,不敢擅自行动,怕把window ...

  2. 前端浏览器自动刷新神器：Browsersync

    [安装] 1 npm install -g browser-sync [静态项目使用browsersync] 自己可以去browsersync官网查看,其实使用很简单,总结下就是: 1 browser ...

  3. Fiddler 抓包的基本介绍

    一.什么是Fiddler? Fiddler是一种常见的抓包分析软件,我们可以使用它对HTTP请求进行分析,并模拟对应的HTTP请求. 二.Fiddler抓包实现的原理 Fiddler就相当于某二手车直 ...

  4. numpy鸢尾花

    import numpy from sklearn.datasets import load_iris #从sklearn包自带的数据集中读出鸢尾花数据集data iris_data = load_i ...

  5. C# DES加密类，16位的加密。

    这个加密类是与java写的DES加密不同时,自己写的,最后与Java的加密相同了,解决了加密后不同的问题. 可以直接调用里面的加密和解密的方法. using System; using System. ...

  6. VMWare安装

    1. VMware 的下载和安装 VMware Workstation 15 Pro for Windows(64 位)的下载地址如下: 官方试用版地址:http://www.vmware.com/c ...

  7. 《DSP using MATLAB》Problem 7.25

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  8. python excle写数据

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/4/24 10:30 # @File : Excle写.py # @Softw ...

  9. Assembly Experiment9

    用英文写太浪费时间了,而且书上的讲解对各种功能的英文原句少之又少,有空还是看龙书吧(不存在的) 实验1: 十六进制转换十进制 实验代码: ; 在屏幕上输出内存单元中的十进制两位数 assume cs: ...

  10. EXCEL日期格式要双击一下单元格才变正确格式

    今天遇到标题问题,问度娘后看到一个大神的解答,特此记录整理. 步骤1:在excel中把文本格式日期改为想要的日期格式 步骤2:在旁边空格中输入1,并设置成日期格式,变成1900/1/1: 步骤3:复制 ...