css - 动态高度后 float

Question

我有一个宽度为 100% 的 JQuery 图像推子；和高度:自动；

这太棒了，因为它也适用于 iPhone。

现在我希望内容“ float ”在我的 JQuery slider 之后，但我确实遇到了问题，因为我使用高度自动来获得正确的比例，以及 100% 宽的图像。

我试过:overflow: hidden, auto and clear: both; width: 100% 在下面的元素上，我也试过 float 这两个元素，但如果没有定义的高度它就不会工作。如果我定义一个高度，它会起作用。但是，我希望高度是动态的。

这可以用 CSS 完成吗，还是我需要使用 JS？

这是网站:www.magento-design.dk(它是一个 Joomla，有基础)。我希望基础演示内容 float 在 JQuery slider 之后。

Answer 1

我的建议是将高度设置为某个值，然后在内容更改时通过 JavaScript 更改它。 auto 的 CSS 高度没有设置像素值，因此您需要通过 JavaScript 定义一个。

在 JavaScript 中将高度更改设置为一个函数，您可以在 $(document).ready() 以及内容更改调用中调用它。

编辑 1:

我会使用下面的代码来实现你想要做的...

jQuery(document).ready({
    set_img_height();
});

jQuery("#contentDIV").load("data.html", function() {
    set_img_height();
});

function set_img_height() {
    var height = jQuery('#slideshow').height();
    jQuery('.imagefade').css('height', height);
}

当然，如果我不更具体地了解您要查找的内容，写这篇文章对我来说有点困难。但基本思路如下:

1. 您创建了一个函数，它将获取幻灯片的高度，并使其成为所有具有“imagefade”类的元素的高度
2. 接下来在文档就绪函数中调用此函数(当处理 PHP 和完全加载 HTML 时)
3. 最后，使用回调函数加载信息再次调用此函数。我不知道你是如何加载内容的，但我基本上假设你正在将一个文件“data.html”加载到一个 id 为“contentDIV”的 div 中，完成后......它调用定义的 set_img_height 函数在它下面。

此代码可能不是为您复制和粘贴的 Material ，但基于您自己未提供任何实际代码的情况，这是我能做的最好的。希望这至少能为您指明正确的方向!