文章/答案/技术大牛

发布

社区首页 >问答首页 >浮动图像能跟踪文本吗？

问浮动图像能跟踪文本吗？
EN

Stack Overflow用户

提问于 2017-04-11 20:17:59

回答 5查看 88关注 0票数 2

我想在一些文字的右边浮动一个图像。看起来，只有在html中的文本前面时，图像才能正确浮动。

这样做是可行的：

<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: right;
}
</style>
</head>
<body>
<p>
<img src="http://placehold.it/100x100"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p>
</body>
</html>

这不管用：

<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: right;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<img src="http://placehold.it/100x100"/>
</p>
</body>
</html>

下面是代码页上的样子，有足够的文本，这样您就可以看到浮点是否工作：示例

这是一个问题，因为我已经编写了一个js函数，它将图像从一个右浮动的缩略图切换到一个完整的大小图像，并且我希望文本下面的是完整大小的图像，而不是在它上面。

html

css

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-04-13 22:40:51

感谢所有做出贡献的人！下面是我如何解决这个问题的方法：

为图像创建两个图形容器。第一个图形在文本之前，第二个图形在文本之后。第一个图形使用一个带有css的类，它正确地浮动它并使它变小。第二个图形使用一个没有浮点和全显示大小的类。第一个图形最初有"display:block“，第二个图形"display:none"，所以只有在页面加载时才能看到缩略图。

每个图形都有自己的onclick js函数，其目的是通过为自己的类设置" display :none“来隐藏自己，并通过将其设置为"display:block”来显示另一个图形。

function displayImage(myObj) {
	/* myObj is the thumbnail img object */
	objParent = myObj.parentElement
	objImage = objParent.getElementsByClassName("fullImage")[0];
		/* Remove the classname so the Div doesn't use display: flex. */
	objParent.className = "";
	/* Display the image */
	objImage.attributes.style.value = "display:block"
	/* Hide the thumbnail */
	myObj.attributes.style.value = "display:none"
}

function displayThumbnail(myObj) {
	/* myObj is the full img object */
	objParent = myObj.parentElement
	objThumbnail = objParent.getElementsByClassName("thumb")[0];
	/* Add the classname so the Div uses display: flex. */
	objParent.className = "clearfix";
	/* Display the thumbnail */
	objThumbnail.attributes.style.value = "display:block"
	/* Hide the image */
	myObj.attributes.style.value = "display:none"
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.float-figure-right {
	float: right;
	width: 10%;
}

figure {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  margin: 0.5em;
}

figure.thumb {
	min-width: 10%;
	max-width: 10%;
	border: thin #882529 solid;
	padding: 0.25em;
}

figure.thumb:hover {
	min-width: 11%;
	max-width: 11%;
	border: thin #882529 dotted;
}

figure.thumb > img{
	width: auto;
}

	<div class="clearfix">
		<figure class="thumb float-figure-right" style="display:block" onmouseover="this.style.cursor='pointer'" onclick="displayImage(this)">
			<img src="http://placehold.it/250x250"
				width=50 height=50>
		</figure>
	<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
	</p>
		<figure class="fullImage" style="display:none" onmouseover="this.style.cursor='pointer'" onclick="displayThumbnail(this)">
			<img src="http://placehold.it/250x250">
			<figcaption>Caption for the full image</figcaption>
		</figure>
	</div>

票数 0

Stack Overflow用户

发布于 2017-04-11 20:25:52

你的花车可以正常工作了。浮标的工作方式是将元素从正常流中取出，并按指定的方向将其定位到容器的边缘。第一个看起来“关闭”的原因是您的img标记已经位于容器的末尾。。。不，它还能去哪里呢。

另一方面，当您将img作为段落中的第一个元素时，它上的float属性将更积极地接受该元素并将其移动到容器的另一端。希望你能在这里读到更多关于浮点数的文章，MDN浮子

票数 1

Stack Overflow用户

发布于 2017-04-11 20:47:36

如果您有一个js函数，可以将图像从一个右浮动的缩略图切换到一个完整大小的图像，那么您应该使用该函数将图像从前移动到内容后面。此解决方案可支持跨浏览器。

如果你想通过CSS解决这个问题，并以现代浏览器为目标，你可以遵循StefanBob的答案。

setTimeout(function () {
  document.querySelectorAll('article')
    .forEach(function (article) {
      let thumbnail = article.querySelector('.thumb');
      thumbnail.src = thumbnail.dataset.src;
    
      article.classList.add('full');
      article.appendChild(thumbnail);
    })
  ;
}, 3000);

.thumb {
  float: right;
}

article {
  clear: both;
}

.full img {
  float: none;
  display: block;
  margin: 0 auto;
}

<article>
  <h3>Lorem ipsum dolor sit amet</h3>
  
  <img src="http://placehold.it/100x100" data-src="http://placehold.it/480x360" class="thumb">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at.</p>
</article>

<article>
  <h3>Lorem ipsum dolor sit amet</h3>
  
  <img src="http://placehold.it/100x100" data-src="http://placehold.it/480x360" class="thumb">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius illo at, ducimus expedita similique, hic, ratione voluptates veniam esse ullam, architecto vero quaerat tenetur officiis neque! Inventore architecto, quibusdam at.</p>
</article>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43355456

复制

相似问题

问浮动图像能跟踪文本吗？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浮动图像能跟踪文本吗？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浮动图像能跟踪文本吗？
EN