当前位置： 文江博客话题详情

清除可变宽度父元素中的子元素行

发布于 2024-12-03 04:06:14 字数 338 浏览 1 评论 0原文

使用 jQuery 1.6.2

我在父级中有可变数量的浮动 div。父级可能具有固定宽度，但也可能没有。

我想使用 jQuery 计算出一行中有多少个 div，然后插入一个将clear属性设置为两者的 div，这样子级可能具有可变的高度并且不会弄乱所有内容，并且父级可能有一个可变宽度。

如果您知道 div 的宽度并且知道您想要连续有多少个子级，那么在标记或服务器端脚本中执行此操作很简单 - 但如果一切都多一点怎么办液体？

有没有一种简单的方法可以做到这一点，或者我是否必须对涉及的所有宽度进行一些计算，并进行一些巧妙的数学计算来决定将透明 div 放在哪里？

原文

Using jQuery 1.6.2

I have a variable number of floated divs inside a parent. The parent may have a fixed width but also may not.

I want to use jQuery to work out what number of divs are in one row, then insert a div with clear property set to both, so that the children may have variable heights and not make a mess of everything, and the parent may have a variable width.

It's a simple thing to do either in the markup or server side scripting if you know the width of the div and if you know how many children you want in a row - but what if everything is a bit more liquid?

Is there a simple way to do this, or am I going to have to do some working out of all the widths involved and a bit of clever maths to decide where to put the clear divs?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

终弃我 2024-12-10 04:06:14

试试这个：

示例 jQuery 插件（无法想出更好的插件名称）：

(function ($) {
    $.fn.extend({
        addLineBreak: function (elementToInject) {
            var minLeft = $(this).position().left;

            return $(this).each(function () {
                var position = $(this).position();
                if (position.left > minLeft && $(this).prev().position().left >= position.left) {
                    $(elementToInject).insertBefore(this);
                }
            });
        }
    });
})(jQuery);

用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="jquery.addLineBreak.js"></script>
        <script type="text/javascript">
            $(function () {
                // '.inner' is the selector for the child elements!
                $('.inner').addLineBreak('<div class="clear"></div>');

                // on resize, remove the clear-elements, and inject new ones
                $(window).resize(function () {
                    $('#tmp .clear').remove();
                    $('.inner').addLineBreak('<div class="clear"></div>');
                });
            });
        </script>

        <style type="text/css">
            body {
                background: black;
            }

            .inner {
                float: left;
                margin: 5px;
                padding: 5px;
                border: 1px solid #efefef;
            }

            .clear {
                clear: both;
            }
        </style>
    </head>

    <body>
        <div id="tmp">
            <?php for ($i = 0; $i < 25; $i += 1): ?>
                <div class="inner" style="width: <?php echo rand(100, 150); ?>px; height: <?php echo rand(100, 150); ?>px"><?php echo $i; ?></div>
            <?php endfor; ?>
        </div>
    </body>
</html>

Try this:

Sample jQuery plugin (couldn't come up with a better plugin name):

(function ($) {
    $.fn.extend({
        addLineBreak: function (elementToInject) {
            var minLeft = $(this).position().left;

            return $(this).each(function () {
                var position = $(this).position();
                if (position.left > minLeft && $(this).prev().position().left >= position.left) {
                    $(elementToInject).insertBefore(this);
                }
            });
        }
    });
})(jQuery);

Usage:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="jquery.addLineBreak.js"></script>
        <script type="text/javascript">
            $(function () {
                // '.inner' is the selector for the child elements!
                $('.inner').addLineBreak('<div class="clear"></div>');

                // on resize, remove the clear-elements, and inject new ones
                $(window).resize(function () {
                    $('#tmp .clear').remove();
                    $('.inner').addLineBreak('<div class="clear"></div>');
                });
            });
        </script>

        <style type="text/css">
            body {
                background: black;
            }

            .inner {
                float: left;
                margin: 5px;
                padding: 5px;
                border: 1px solid #efefef;
            }

            .clear {
                clear: both;
            }
        </style>
    </head>

    <body>
        <div id="tmp">
            <?php for ($i = 0; $i < 25; $i += 1): ?>
                <div class="inner" style="width: <?php echo rand(100, 150); ?>px; height: <?php echo rand(100, 150); ?>px"><?php echo $i; ?></div>
            <?php endfor; ?>
        </div>
    </body>
</html>
回复 原文
~没有更多了~

关于作者

蛮可爱

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

離殇

文章 0 评论 0

小姐丶请自重

文章 0 评论 0

Aik

文章 0 评论 0

国产ˉ祖宗

文章 0 评论 0

猥琐帝

文章 0 评论 0

半仙

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文