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

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

jquery

Jquery 清除可变宽度父元素中的子元素行,jquery,css-float,Jquery,Css Float,使用jquery1.6.2 在父级中，浮动div的数量是可变的。父对象可以具有固定的宽度，但也可以不具有固定的宽度我想使用jQuery计算出一行中的div数，然后插入一个clear属性设置为两者的div，这样子级可以有可变的高度，而不是把所有内容都弄乱，父级可以有可变的宽度如果您知道div的宽度，并且知道一行中需要多少子元素，那么在标记或服务器端脚本中都可以做这件事——但是如果所有内容都更具流动性呢有没有一个简单的方法可以做到这一点，或者我需要对所有涉及的宽度进行一些计算，并用一点聪明的数

使用jquery1.6.2

在父级中，浮动div的数量是可变的。父对象可以具有固定的宽度，但也可以不具有固定的宽度

我想使用jQuery计算出一行中的div数，然后插入一个clear属性设置为两者的div，这样子级可以有可变的高度，而不是把所有内容都弄乱，父级可以有可变的宽度

如果您知道div的宽度，并且知道一行中需要多少子元素，那么在标记或服务器端脚本中都可以做这件事——但是如果所有内容都更具流动性呢

有没有一个简单的方法可以做到这一点，或者我需要对所有涉及的宽度进行一些计算，并用一点聪明的数学来决定在哪里放置清晰的div？

试试这个：

示例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>


jQuery
$（函数（）{
//“.inner”是子元素的选择器！
$（'.inner'）.addLineBreak（''）；
//在调整大小时，删除清除的元素，然后注入新的元素
$（窗口）。调整大小（函数（）{
$（'#tmp.clear'）.remove（）；
$（'.inner'）.addLineBreak（''）；
});
});
身体{
背景：黑色；
}
.内部{
浮动：左；
保证金：5px；
填充物：5px；
边框：1px实心#EFEF；
}
.清楚{
明确：两者皆有；
}
当知道父div的宽度和一行中需要多少子div时，php解决方案，如OP中所述
<!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>