怎么用css实现图片右边有字

小编给大家分享一下怎么用css实现图片右边有字，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联专注于岢岚网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供岢岚营销型网站建设，岢岚网站制作、岢岚网页设计、岢岚网站官网定制、微信小程序定制开发服务，打造岢岚网络公司原创品牌,更为您提供岢岚网站排名全网营销落地服务。

用css实现图片右边有字的方法：首先创建一个HTML示例文件；然后通过img标签引入一张图片；接着定义一段文字内容；最后通过css中的float属性实现图片右边有字即可。

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">
        <h4>高尔夫</h4>
        <p>高尔夫球运动是一项健康、绿色、快乐、回归自然的体育运动，打高尔夫球能让人体验挑战与激情，实现人与自然的和谐。人与人礼貌谦让的良好运动精神，是高尔夫球运动的精髓所在。山东的高尔夫球场近30家，全部是按国际标准建造的，场内服务功能及设施完备，是比赛、会议、旅游休闲、商务于一体的度假场所，来山东打高尔夫球定会让您亲身体验到高尔夫应享的尊贵服务。
 </p>
    </div>
</div>
</body>

</html>

运行效果如下图：

怎么用css实现图片右边有字

以上是“怎么用css实现图片右边有字”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

当前文章：怎么用css实现图片右边有字
浏览地址：https://www.cdcxhl.com/article2/gigeic.html

成都网站建设公司_创新互联，为您提供全网营销推广、自适应网站、建站公司、、用户体验、静态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容