очистить строки дочерних элементов в родительской переменной ширины - PullRequest
Новая
       2

очистить строки дочерних элементов в родительской переменной ширины

4 голосов
/ 05 сентября 2011

Использование jQuery 1.6.2

У меня есть переменное число плавающих div внутри родительского элемента. Родитель может иметь фиксированную ширину, но также не может.

Я хочу использовать jQuery, чтобы выяснить, какое количество элементов div в одной строке, а затем вставить элемент div со свойством clear, равным обоим, чтобы дочерние элементы могли иметь переменную высоту и не мешать всем, а родитель может иметь переменную ширину.

Это просто сделать в сценариях разметки или на стороне сервера. если вы знаете ширину div и если вы знаете, сколько детей вы хотите в строке - но что, если все немного больше жидкости?

Есть ли простой способ сделать это, или мне нужно будет немного поработать над всеми задействованными значениями ширины и немного умной математики, чтобы решить, куда поместить чистые делители?

1 Ответ

2 голосов
/ 05 сентября 2011

Попробуйте это:

Пример плагина 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...