用css实现图片右侧带字-开发网

用css实现图片右侧带字的办法：最先创建一个HTML实例文档；再通过img标识引进一张图片；然后界定一段文字具体内容；最后通过css里的float特性实现图片右侧带字就可以。

用css实现图片右侧带字

本实例教程作业环境：windows7系统软件、HTML5&&CSS3版、Dell G3计算机。

html css 左手边照片，右边文本

比较简单，编码实例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    .photo{
        float:left;
        width:20%;

    }
    .intro{
        float:right;
        width:70%;
    }
</style>
</head>
<body>
<div class="golf">
    <div class="photo"><img src="02.png"></div>
    <div class="intro">
        <h3>高尔夫球</h3>
        <p>高尔夫球运动是一项身心健康、翠绿色、开心、走进自然的体育竞赛，打高尔夫能让你感受考验与激情，完成人与自然和睦。人和人之间文明礼貌礼让的优良体育精神，是高尔夫球运动的真谛所属。山东省的高尔夫练习场近30家，全部都是按国家标准修建的，场地服务能力及设备完善，是赛事、大会、旅游休闲、商务接待于一体的休闲度假场地，来山东省打高尔夫定会使您切身体会到高尔夫球应享的高贵服务项目。
 </p>
    </div>
</div>
</body>

</html>

运作实际效果如下图所示：

用css实现图片右侧带字