как центрировать столбцы на основе ширины окна

ProgramBox

как центрировать столбцы на основе ширины окна

Post author:admin
Запись опубликована:7 февраля, 2023
Post category:Вопросы по программированию

#javascript #css

Вопрос:

 <link rel="stylesheet" type="text/css" href="reset.css" />      
<style type="text/css">
        body { position: relative; }

        .contain { position:relative; overflow: hidden; width: 80%; height: 100%; margin: 0 auto; }     

        .box {
            background-color: #F0F0F0;
            color: #888;
            font-family: Arial, Tahoma, serif;
            font-size: 13px; }

        .box p { padding: 10px; }

        .box span {
            float: left;
            font-size: 26px;    
            font-weight: bold;  }

        div.alt { background-color: #CCC; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    var myFluidGrid = {
            COLNUMBER : 2, // Minimum column number.
            COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
            COLWIDTH : 240, // Fixed width of all columns.

            doLayout : function() {
                var self = this;
                var pointer = 0;
                var arr = [];
                var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH   this.COLMARGIN)));

                $('.box').css('position', 'absolute').css('width', this.COLWIDTH    'px');
                $('.box').each(function() {
                    var tempLeft = (pointer * (self.COLWIDTH   self.COLMARGIN));
                    $(this).css('left', tempLeft   'px');

                    var tempTop = 0;
                    if (arr[pointer]) { tempTop = arr[pointer]; }
                    $(this).css('top', tempTop   'px');

                    arr[pointer] = tempTop   $(this).outerHeight()   self.COLMARGIN;
                    pointer  ;
                    if (pointer === columns) { pointer = 0; }
                });
            }
        };
        $(window).ready(function() {
            myFluidGrid.doLayout();
        }).resize(function() {
            myFluidGrid.doLayout();
        });
    </script>

<div class="contain">    
    <div class="box">This is box number 1...</div> 
    <div class="box">This is box number 2...</div>
    <div class="box">This is box number 3...</div>
</div>

Демонстрация текущего кода: http://grahamthomas.me/temp/test.html

Попытка заставить вышеуказанную сетку оставаться центрированной в окне независимо от ее размера. В настоящее время он примерно центрирован, но при настройке размера окна центрирование становится неверным до тех пор, пока новый столбец не будет заполнен содержимым (т. Е. Когда динамическая сетка находится между столбцами — больше 3 столбцов, но не совсем 4).

Я не силен в JS, но моя логика:

создайте 100% оболочку (которая будет имитировать измерение body.innerWidth в JS)
создайте центрированную оболочку внутри этого (например, 80%)
поместите содержимое в центрированную оболочку
как только 100%-ная оболочка станет достаточно большой для обработки дополнительного столбца, добавьте новый div в центрированную оболочку

Вы можете четко видеть переполнение: скрытое свойство «перекрывает» самые правые поля при перетаскивании окна меньшего размера. Исходя из этого, я предполагаю, что ширина окна вычисляется неправильно. Я пробовал варианты столбцов var, например:

 var columns = Math.max(this.COLNUMBER, parseInt(($('body').innerWidth() * 0.8)/ (this.COLWIDTH   this.COLMARGIN)));

.. который удерживает столбцы внутри окна, но по-прежнему не является надлежащим центром.

Я некоторое время смотрел на это, у кого-нибудь есть идеи?

Спасибо

1. Можете ли вы более конкретно объяснить, какова ваша цель? Я бы проверил плагин jQuery Isotope. Я часто использую его для этих пользовательских типов гибких макетов

2. @Greg Моя цель — центрировать все видимые поля. Итак, когда у вас есть 3 столбца, они центрируются на экране, затем, когда вы расширяете окно, эти 3 столбца остаются центрированными, пока не появится 4-й столбец. Как это сделал Isotope здесь: http://isotope.metafizzy.co/tests/centered-masonry.html

Ответ №1:

JavaScript не требуется:

 <html>
<head>
<style>
body {
    text-align: center;
}
div.main {
    position: absolute;
    top: 100px;
    left: 50%;
    margin-left: -40%;
    width: 80%;
}

div.main div.block {
    height: 180px;
    width: 180px;
    background: #a00;
    float: right;
    margin: 10px;
}
</style>
</head>
<body>
<div class="main">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
</body>
</html>