相对于<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. ansible系列4-关闭ssh首次连接时提示

    在ansible配置文件中找到 /etc/ansible/ansible.cfg 方法1 在配置文件中找到 了解到问题原因为,我们了解到进行ssh连接时,可以使用-o参数将StrictHostKeyC ...

  2. BZOJ1415[Noi2005]聪聪和可可——记忆化搜索+期望dp

    题目描述 输入 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行 ...

  3. BZOJ2553[BeiJing2011]禁忌——AC自动机+概率DP+矩阵乘法

    题目描述 Magic Land上的人们总是提起那个传说:他们的祖先John在那个东方岛屿帮助Koishi与其姐姐Satori最终战平.而后,Koishi恢复了读心的能力…… 如今,在John已经成为传 ...

  4. day9 集合基础命令

    集合的创建 s = set("hello") print(s) s = set({","alex","sb"}) print(s) ...

  5. git命令行界面

    学习目标:掌握git命令行界面的操作.掌握最基本的clone add commit push pull操作. 先下载客户端:http://github-windows.s3.amazonaws.com ...

  6. THUWC2018酱油记

    Day 0 今年的THUWC在我们学校,听说有pretest,感觉有不好的预感.... Day 1 早上7:00在校门口集合,车7:30以后才到,感觉就像在围观 期末考试.来到雅礼洋湖,在这里看到了初 ...

  7. android 图片处理经验分享

    在设置ImageView资源的时候,这时的图片是来自SD卡,查看API很容易就会看到view.setImageUri(Uri u)这个函数.所以一般会这样写:  ImageView view = (I ...

  8. 洛谷 P10P1343 地震逃生 改错

    P1343 地震逃生 题目描述 汶川地震发生时,四川**中学正在上课,一看地震发生,老师们立刻带领x名学生逃跑,整个学校可以抽象地看成一个有向图,图中有\(n\)个点,\(m\)条边.1号点为教室,\ ...

  9. linux 用户及用户组管理

    主要分为以下三部分: 1. 用户账号的添加.修改及删除 2. 用户口令的管理 3. 用户组管理 用户管理 1.添加新用户账号 $ useradd 选项 用户名 选项: -c comment 指定一段注 ...

  10. Windows下禁用锁屏热键WinKey+L

    在注册表[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\System]中创建名字为DisableLockWo ...