相对于<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. BZOJ4569 SCOI2016萌萌哒（倍增+并查集）

    一个显然的暴力是用并查集记录哪些位之间是相等的.但是这样需要连nm条边,而实际上至多只有n条边是有用的,冗余过多. 于是考虑优化.使用类似st表的东西,f[i][j]表示i~i+2^j-1与f[i][ ...

  2. ajax 提交字符串到后台 反序列化

    MVC后台 或者 Webapi 都可以使用此方式 前台 @using (Html.BeginForm("Test","Test")) { <input t ...

  3. LOJ6387 [THUPC2018] 绿绿与串串 【manacher】

    题目分析: 比较简单,先跑一边manacher,然后对于回文部分可以碰到末尾的一定满足条件,否则向后转移. 代码: #include<bits/stdc++.h> using namesp ...

  4. LightOJ - 1074 Extended Traffic（标记负环）

    题意:有n个城市,每一个城市有一个拥挤度ai,从一个城市u到另一个城市v的时间为:(au-av)^3,存在负环.问从第一个城市到达第k个城市所话的时间,如果不能到达,或者时间小于3输出?否则输出所花的 ...

  5. （伪）再扩展中国剩余定理（洛谷P4774 [NOI2018]屠龙勇士）（中国剩余定理，扩展欧几里德，multiset）

    前言 我们熟知的中国剩余定理,在使用条件上其实是很苛刻的,要求模线性方程组\(x\equiv c(\mod m)\)的模数两两互质. 于是就有了扩展中国剩余定理,其实现方法大概是通过扩展欧几里德把两个 ...

  6. 18 Zabbix 新增map中的icon图标

    点击返回:自学Zabbix之路 18 Zabbix 新增map中的icon图标 zabbix系统默认会带有许多的icon图标,但对于特殊需求人群可能无法满足,那就需要新增icon图标. 通过Admin ...

  7. 【转】安全加密（三）：RFID标签防伪为生活开启安全模式

    本文导读 随着RFID技术的快速发展和RFID电子标签的生产成本不断降低,RFID标签防伪技术的应用也得到了极大的普及,逐步出现在各行各业当中,如交通出行.票务安全.商品防伪等领域. RFID技术简介 ...

  8. scp 的用法

    scp用于在linux下远程拷贝文件, 与rsync相比,scp不占资源,不会提高多少系统负荷,虽然 rsync比scp会快一点,但当小文件众多的情况下,rsync会导致硬盘I/O非常高,而scp基本 ...

  9. VB|xp风格：终于解决了“图片优化软件”在部分xp系统上无法启动的问题。

    一年以来,图片优化软件一直存在一个“兼容”性问题. 因为之前的软件是在windows 2003系统上开发的,制作成安装文件后,经部分用户测试发现,在部分用户的xp系统上安装后,无法正常启动,只能听到p ...

  10. python(六)——基本数据类型介绍

    1.数字整形 python3不管数字有多大都是int型,没有long类型 1>字符串转换为数字 s1 = " print(type(s1),s1) b = int(s1)#不加base ...