相对于<img>元素的align特性来说，越来越多的网页设计人员使用float属性来对齐图像。可以采用两种方式来实现对齐。为了确保文本不会与图像的边缘接触，我们经常会给图像增加一个外边距。

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style type="text/css">

	body {

	        font-family: Georgia, "Times New Roman", serif;

	        color: #665544;}

	img.align-left	{

		float: left;

		margin-right: 10px;}

	img.align-right	{

		float: right;

		margin-left: 10px;}

	img.medium {

		width: 250px;

		height: 250px;}

		</style>

	</head>

	<body>

            <p><img src="magnolia-large.jpg" alt="align-right medium" class="align-left medium"/><b><i>Magnolia</i></b>

                is a large genus that contains over 200 flowering plant species. It is named after French botanist Pierre

                Magnol and, having evolved before bees appeared, the flowers were developed to encourage pollination by beetle.</p>

            <p><img src="magnolia-large.jpg" alt="align-right medium"class="align-right medium"/>Some magnolias, such as

                <i>Magnolia stellata</i> and <i>Magnolia soulangeana</i>, flower quite early in the spring before the leaves open.

                Others flower in late spring or early summer, such as <i>Magnolia grandiflora</i>.</p>

	</body>

</html>

使用CSS将图像对齐的更多相关文章

  1. CSS背景图像的简单响应

    本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...

  2. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  3. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  4. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  5. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  6. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  7. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  8. CSS背景图像位置属性background-position百分比详解

    百分比值同关键字很接近,但其操作方式不一样.用百分比值来居中一幅背景图像,也很简单: body { background-image;url(beijing.gif); background-repe ...

  9. 用CSS边框图像让你的网站更漂亮

    不久之前,添加一些装饰性元素,例如给网页中的图片添加花哨的边,以及耐心调整CSS文件才能使你的网页看起来不错.然而现在CSS已经做出了改变,用复杂的边框装饰你的网站只需几行代码.这篇文章将告诉你如何做 ...

随机推荐

  1. Can you answer these queries? HDU - 4027（线段树+技巧）

    题意:给一个数组序列, 数组长度为100000 两种操作: 一种操作是将某一个固定区间所有数开方(向下取整) 另一种操作是询问某个区间的所有数字之和. 由于数不超过263,因此开个七八次就变成1,由于 ...

  2. day21 re模块

    引入方式 import re 方法 .findall() 找所有的,返回所有的结果然后放在列表中 ret = re.findall("[a-z]+","yangtuo t ...

  3. [luogu4513]小白逛公园

    题目描述 在小新家附近有一条"公园路",路的一边从南到北依次排着n个公园,小白早就看花了眼,自己也不清楚该去哪些公园玩了. 一开始,小白就根据公园的风景给每个公园打了分-.-.小新 ...

  4. 【Codeforces 98E】 Help Shrek and Donkey

    http://codeforces.com/problemset/problem/98/E (题目链接) 题意 A君有n张牌,B君有m张牌,桌上还有一张反扣着的牌,每张牌都不一样. 每个回合可以做两件 ...

  5. 从C,C++,JAVA和C#来看String库的发展(二)---JAVA和C#篇

    http://www.cnblogs.com/wenjiang/p/3272859.html 终于要进入面向对象的世界了,虽然C++也是面向对象,但是它的面向对象程度并不高,因为考虑到要兼容C语言的移 ...

  6. FFMEPG -- A ffmpeg and SDL Tutorial : tutorial05

    修改了同步播放ffmpeg问题.并且增加可以放大视频. // tutorial05.c // A pedagogical video player that really works! // // C ...

  7. LOJ#2095 选数

    给定n,k,l,r 问从[l, r]中选出n个数gcd为k的方案数. 解:稍微一想就能想到反演,F(x)就是[l, r]中x的倍数个数的n次方. 后面那个莫比乌斯函数随便怎么搞都行,当然因为这是杜教筛 ...

  8. P1856 矩形周长

    哇!这小破题坑了我好久. 扫描线+线段树 这题数据范围小,没离散化.真要离散化我还搞不好呢. 具体的看这个博客吧. 主要是这个坑爹的c,len把我搞了,其他的还好. 代码: #include < ...

  9. 再次膜拜IE的超强兼容性

    今天用firefox和chrome打开几年前写的一个网页,突然发现复选框的“全选”功能失效了. 然后用ie试了一下,竟然正常. 到firefox的错误控制台查看,提示错误: TypeError: id ...

  10. 使用react封装评论组件

    首先看我的效果图 我在评论框中输入数据,会在页面进行显示 这个效果图我们进行拆分就是,一个评论组件,一个大的评论列表组件,一个小的评论组件 首先整个页面中有的是我们的评论组件和列表组件 我们输入评论点 ...