使用 JavaScript 查找 CSS Float

Find CSS Float with JavaScript

本文关键字：Float CSS 查找 JavaScript 使用      更新时间：2023-09-26

我是使用 JavaScript 的新手。 如何确定图像的浮点属性（左/右）？我想会是这样的——

var positionFloat = $(this).position();

我正在使用 http://davemcmillan.net 的以下标题叠加代码。 很棒的叠加层，我只需要能够将标题跨度与图像一起浮动 - 左或右。

谢谢！

// display image caption on top of image
$("#content img").each(function() {
var imageCaption = $(this).attr("alt");
if (imageCaption != '') {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
var position = $(this).position();
var positionTop = (position.top + imgHeight - 26)
$("<span class='img-caption'><em>"+imageCaption+"</em></span>")
.css({"position":"absolute", "top":positionTop+"px", "left":"0", "width":imgWidth +"px"})
.insertAfter(this);
}
});

将标题放置在图像顶部的最简单方法是将图像和标题放在同一个包含div 中，将容器声明为 position:relative，然后在文本上使用绝对定位以相对于图像顶部的容器定位它。

下面是一个示例：http://jsfiddle.net/jfriend00/Wvtuz/

<div class="container">
    <img src="http://photos.smugmug.com/Family/John-Muir-Trail/Favorite-Landscapes/i-PPwFDdc/0/M/JMT-20130727112047-2595-M.jpg">
    <div class="caption">Rae Lakes on John Muir Trail</div>
</div>
.container {
    position: relative;
}
.caption {
    position: absolute;
    top: 10px;
    left: 140px;
    color: black;
    font-size: 28px;
}

您可以使用 css 属性获取 float 的值。喜欢这个

var sideFloat = $(this).css('float');
相关文章：