<!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. 百川sdk----自己的WebViewClient不被执行【废弃，新版本百川已修复此问题】

    我在百川sdk的旺旺群中,追问这个问题N多次,一直没有人答复,哎,凡事都要靠自己..... 1.先查看下百川sdk中,是怎么处理咱们传递过去的 WebViewClient public class l ...

  2. linux nginx 如何配置多个端口

    在linux下发布.netcore 应用,并使用nginx进行反向代理,参照博客园文章 https://www.cnblogs.com/ants/p/5732337.html#autoid-7-3-0 ...

  3. 前端工程化基础-vue

    由浅入深支持更多功能 1.安装最新版本的node.js和NPM,并了解NPM基本用法. 2.创建一个目录demo.使用npm 初始化配置: npm init  ,执行后会有一系列选项,可按回车快速确认 ...

  4. MySQL 报错 1093

    [Err] 1093 - You can't specify target table 'user' for update in FROM clause 报错的sql如下: delete from ` ...

  5. Python:从入门到实践--第四章--列表操作--练习

    #1.想出至少三种你喜欢的水果,将其名称存储在一个列表中,再使用for循环将每种水果的名称都打印出来. #要求:(1)修改这个for循环,使其打印包含名称的句子,而不是仅仅是水果的名称.对于每种水果, ...

  6. sping配置头文件

    spring配置文件头部xmlns配置精髓   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <beans xmlns="http://www.s ...

  7. js 数字随机滚动(数字递增) 每日凌晨回到原点,重新计算

    html: <div class="textMon"> <!--<img src="./img/20180830160315.png" ...

  8. springboot+mybatis-puls利用swagger构建api文档

    项目开发常采用前后端分离的方式.前后端通过API进行交互,在Swagger UI中,前后端人员能够直观预览并且测试API,方便前后端人员同步开发. 在SpringBoot中集成swagger,步骤如下 ...

  9. ASP.NET+MVC+EntityFramework快速实现增删改查

    本教程已经录制视频,欢迎大家观看我在CSDN学院录制的课程:http://edu.csdn.net/lecturer/944

  10. sdk（输入驱动物体 驱动属性 被驱动物体 被驱动属性 驱动数值 一键搞定驱动），当你的目标体很多展开会卡的时候使用这个

    import  maya.cmds  as  mc def   sdksomething( sdk_obj="",                    sdkAttr=" ...