如何在 HTML 中让文字环绕图片

2025 年 3 月 25 日 | 阅读 2 分钟

使用内部 CSS

如果我们想在 HTML 文档中使用内部 CSS 让文本围绕图像，我们需要按照下面给出的步骤进行。通过这些步骤，我们可以轻松地让文本环绕。

步骤 1：首先，我们必须在任何文本编辑器中输入 HTML 代码，或者在文本编辑器中打开想要环绕文本的现有 HTML 文件。

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Wrap a text around an image
</Title>
</Head>
<Body> 
Hello User!....   <br>
Html Tutorial   <br>
This page helps us to understand how to wrap the text around an image in Html using CSS. 
</Body>
</Html>

步骤 2：现在，我们必须为图像对齐输入 CSS 代码。因此，我们必须在 <head> 标签中的 <title> 标签之后输入 <style> 标签。

<Head> 
<Title> 
Wraping text around image
</Title> 
<style> 
</style> 
</head> 

步骤 3：然后，我们需要定义各种属性来让文本围绕图像。因此，我们需要定义一个类。

.wrapingimage
{
float: left; 
margin: 30px 12px 3px 4px; 
border: 2px solid blue;
}

步骤 4：现在，我们需要在 body 标签中使用定义的类，如下面的截图所示。

<div class="wrapingimage"> 
<img src=  
"images/logo/jtp_logo.png" height="100" width="100"
alt="image">  
</div> 

步骤 5：最后，我们必须保存 HTML 文件，然后在浏览器中运行该文件。

<!DOCTYPE html> 
<Html> 
<Head> 
<Title> 
Wraping text around image
</Title> 
<style> 
.wrapingimage
{
float: left; 
margin: 30px 12px 3px 4px; 
border: 2px solid blue;
} 
</style> 
</head> 
<body> 
Hellooo User!!!....
<div class="wrapingimage"> 
<img src=  
"images/logo/jtp_logo.png" height="100" width="100"
alt="image">  
</div> 
<p> 
If we want to wrap the text around an image in Html document using Internal CSS then we have to follow the steps which are given below. Using these steps we can easily wrap a text. 
Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to wrap the text. 
Step 2: Now, we have to type the CSS code for aligning the image. So, we have to type the style tag in the head tag just after the title tag. 
Step 3: And, then we have to define the various properties for wrapping the text around the image. So, we have to define a class. 
</p> 
</Body> 
</Html> 

上述 HTML 代码的输出显示在以下屏幕截图中

How to Wrap Text around an image in Html

下一主题HTML vs HTML5

如何在 HTML 中让文字环绕图片

使用内部 CSS

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中让文字环绕图片

使用内部 CSS

相关帖子

HTML 表格固定列宽

手风琴 HTML

如何在 HTML 中更改字体大小

HTML Onclick 事件

HTML 页面弹出窗口

HTML 的表情符号代码

在 HTML 中添加图标

HTML 编码

HTML 中的 hgroup 标签

HTML 中的绿色代码

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器