图片和文字的排版

最新推荐文章于 2024-11-22 15:00:16 发布

原创最新推荐文章于 2024-11-22 15:00:16 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了一种简单实用的网页图文布局方法，通过调整HTML中img和p标签的浮动属性实现图片与文字的左右布局，并提供了调整布局的具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图左文右：

	<style type="text/css">
	    img,p{float:left;}
	   .clearfix:after{display:table;content:"";clear:both;}
       .clearfix{*zoom:1;}
	</style>
</head>
<body>
    <div class="clearfix">
    	<img src="img/1.png" width="120" hspace="10" vspace="0">
	    <p style="width:400px;">
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字
    </p>
	
    </div>
</body>

将img标签和p标签的浮动改为右浮动即为图右左文若想调整图片或者文字的位置使用margin或者position即可

通过最近的学习教大家一个更简单的图片文字布局的方法

	<style type="text/css">
    img{float:left;width:300px;}
	</style>
</head>
<body>
	<img src="img/list2.png">
	<p>
		我是文字我是文字
		我是文字我是文字
		我是文字我是文字
		我是文字我是文字
		我是文字我是文字
	</p>
</body>

这个是图片在左边文字在右边

如图：