实现文字环绕图片右下角的HTML与JavaScript代码

需积分: 13 103 浏览量更新于2024-09-14 收藏 2KB TXT 举报

本文档主要讨论的是如何在HTML页面上实现文字环绕图片，特别关注于将图片放置在页面的右下角，并通过CSS和JavaScript进行布局控制。首先，文档使用了XMLHttpRequest Document Type Definition (DTD)声明，定义了HTML文档的结构遵循的是XHTML1.0 Transitional规范，确保兼容性和标准性。标题“文字环绕图片右下角”表明主题是关于图像定位，即如何使文本在图片下方并紧密围绕图片，同时图片定位在网页的右下角。这个功能对于设计具有吸引力的网页布局非常重要，特别是在信息密集型或有视觉引导需求的网站中。描述部分提到了使用JavaScript函数BottomDwellers来处理这种布局，该函数会查找页面上的所有图片元素（img标签）。当给定一个容器ID时，它将只处理指定容器内的图片；如果没有提供，它会搜索整个文档。函数通过遍历找到的图片元素，寻找具有特定类名（如"bottomfloater"）的图片，并查找与其相邻的具有"bottompusher"类名的元素，以便调整布局，使图片下方的文字不会覆盖图片。在这个过程中，关键的CSS和JavaScript技术包括： 1. CSS样式：可能涉及到定位（position）属性，如`relative`或`absolute`，以及`right`和`bottom`属性来设置图片的位置。`bottomfloater`和`bottompusher`类可能是自定义的CSS类，用于控制图片与周围元素的关系。 2. JavaScript逻辑：通过`getElementById`方法获取容器和图片元素，然后使用`getElementsByTagName`遍历它们。当找到匹配的类名时，会保存图片对象（dwellers[]数组）及其相关的推动元素（pusher属性），以便动态调整布局。 3. 动态调整：当用户滚动页面或者窗口大小变化时，可能需要使用JavaScript监听事件，根据图片和文字的实际位置调整图片的CSS属性，以保持文字始终在图片下方。总结来说，本文档的核心知识点在于利用HTML、CSS和JavaScript组合，创建一个响应式的网页布局，使得文字能够优雅地环绕并紧贴图片，尤其是在图片位于页面右下角的情况下。这涉及了前端开发的基础技能，如元素选择、样式控制和动态交互的实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字环绕图片右下角</title>
<meta name="generator" content="BBEdit 8.2" />
<script type="text/javascript">
// <![CDATA[
BottomDwellers = function(containerId) {
if (!document.getElementsByTagName) return;
this.dwellers = new Array();
var images = new Array();
if (containerId) {
var floatContainer = document.getElementById(containerId);
images = floatContainer.getElementsByTagName("img");
}
else {
images = document.getElementsByTagName("img");
}
for (var i=0;i<images.length;i++) {
if (images[i].className && images[i].className == "bottomfloater") {
var dweller = images[i];
for (var i=0;i<dweller.parentNode.childNodes.length;i++) {
var sib = dweller.parentNode.childNodes[i];
if (sib.className && sib.className == "bottompusher") {
dweller.pusher = sib;
break;
}
}
if (dweller.pusher) this.setPusherHeight(dweller);

下载后可阅读完整内容，剩余1页未读，立即下载

JaysonJin

粉丝: 0
资源: 8

实现文字环绕图片右下角的HTML与JavaScript代码

CSS技巧：轻松实现文字环绕图片及其常见问题解决方案

MindManager教程：图片与文字排列设置详解

MindManager基础教程：图片文字排列与设置技巧

html把文字放在右下角环绕

css 文字上右下环绕广告的写法

WPS文字中怎么加水印.docx

Word文字处理软件练习题及答案.doc

使用Word2021编辑图片.docx

PowerPoint图片编辑技巧：快速插入与美化

绘制渐变颜色和图片纹理的三维图形

最新资源