一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS Align</title>

    <style>

    body {

        margin: 0;

        padding: 0;

    }

    .container {

        position: relative;

        width: 100%;

    }

    .center {

        margin: auto;

        width: 70%;

        background-color: #b0e0e6;

    }

    .right {

        position: absolute;

        right: 0px;

        width: 300px;

        background-color: #b0e0e6;

    }

    .right {

        float: right;

        width: 300px;

        background-color: #b0e0e6;

    }

    </style>

</head>

<body>

    <div class="center">

        <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>

        <p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

    </div>

    <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>

    <div class="right">

        <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>

        <p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

    </div>

    <div class="container">

        <div class="right">

            <p><b>Note: </b>When aligning using the position property, always include the !DOCTYPE declaration! If missing, it can produce strange results in IE browsers.</p>

        </div>

    </div>

    <div class="right">

        <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>

        <p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

    </div>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-CSS-CSS Align的更多相关文章

  1. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  2. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  3. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  4. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  5. Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形

    Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...

  6. @import————————css代码内部链接另外css

    在css代码里这样可以链接另外的css @import url("style.css");   @import语法结构 @import + 空格+ url(CSS文件路径地址); ...

  7. Web云笔记--CSS

    CSS CSS CSS Web自学第二阶段之CSS 参考资料:<Head First HTML&CSS>(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出 ...

  8. 写给自己的web总结——css篇（1）

    上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种 ...

  9. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  10. 前端笔记 （2.CSS）

    知识点借鉴于慕课网,菜鸟教程和w3shool CSS方面: CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 使用CSS样式的一个好处是通过 ...

随机推荐

  1. zabbix微信报警信息优化模板

    --------------------------------告警模板1-------------------------------------- 默认标题 告警项目: {TRIGGER.NAME ...

  2. 关于ES5的indexof()和ES7的includes()的区别

    早es5的时候就有了查找数组中是否包含某个值的API  indexOf(); 使用方法很简单,比如有个数组是: var arr=[2,3,4,"php"] 如果我们想知道数组中有没 ...

  3. 2018-01-12 Antlr4添加中文变量赋求值,括号,各种问题

    中文编程知乎专栏原文地址 例程(更多测试用例在此): 基数=100 基数×(基数+1)÷2 => 求值为5050 续上文Antlr4实现数学四则运算, 修改的语法规则部分: 程序: 声明+; 声 ...

  4. win10彻底禁用自动更新，win10怎样彻底关闭自动更新，永久关闭win10自动更新，win10更新助手

    首先,请广大win10受害者原谅小菜用一个如此长的标题来吸引你们,为了尽最大努力帮助那些饱受win10自动更新折磨的朋友们,小菜不得已出此下策,望见谅! windows 10是一个神奇的操作系统,当你 ...

  5. Windows Server 2016-客户端退域的三种方法

    前边我们提到了客户端加域的操作方法,本章为大家补充域客户端退域的操作过程,包含图形化.netdom remove.Powershell三种方法,具体内容如下: 图形化退域方法: 1.Win键,计算机右 ...

  6. 个人整理的 Windows 下 .NET 开发必装的软件

    注: 最后更新时间:2019-03-15 一..NET 开发 1. 必装 软件名称 说明 下载地址 JetBrains Toolbox JetBrins 全家桶管理工具. 下载地址 JetBrains ...

  7. centos7下报错： import requests ImportError: No module named requests

    在网上扒了一个python脚本,在centos7上执行的时候报错: import requestsImportError: No module named requests 原因是:requests是 ...

  8. 【死磕 Spring】----- IOC 之 注册 BeanDefinition

    原文出自:http://cmsblogs.com 获取 Document 对象后,会根据该对象和 Resource 资源对象调用 registerBeanDefinitions() 方法,开始注册 B ...

  9. 吴恩达机器学习笔记59-向量化：低秩矩阵分解与均值归一化（Vectorization: Low Rank Matrix Factorization & Mean Normalization）

    一.向量化:低秩矩阵分解 之前我们介绍了协同过滤算法,本节介绍该算法的向量化实现,以及说说有关该算法可以做的其他事情. 举例:1.当给出一件产品时,你能否找到与之相关的其它产品.2.一位用户最近看上一 ...

  10. java中并发下的集合类

    java中常见的集合类大部分是非线程安全的,在多线程情况下会报并发修改异常(ConcurrentModificationException) 并发下的ArrayList类: //集合类不安全的例子 p ...