Почему граница контейнера портит масонство. js размещение предметов? - PullRequest
Новая
       6

Почему граница контейнера портит масонство. js размещение предметов?

2 голосов
/ 16 января 2020

Я использую Библиотеку масонства Десандро , чтобы получить кладку моих плиток.

Проблема: мои плитки смещены на несколько процентных пунктов, поэтому они перекрываются и не отцентрированы, выглядят не так, как предполагалось. Я проследил проблему, или, по крайней мере, ее часть, до того факта, что у моего container есть border 10px.

В свете этого моим решением было вычесть эту границу из ширины плитки, например, width: calc(100% - 25px);, а также вычесть container padding of 10px и tile padding of 5px.

Это остановило наложение плиток, однако, все еще не желаемый результат:

enter image description here

-> Они не центрированы и есть странный пробел справа.

Ниже мой CSS: 

/*Masonry*/

.mod_catalogUniversalView.masonry_list {
    &>* {
        box-sizing: border-box;
    }
    padding: 10px;
}

.ctlg_teaser {
    opacity: 0;
    float: left;
    transition: opacity .2s;
    /* vertical gutter */
    margin-bottom: 10px;
    padding: 5px;
}


.ctlg_teaser {
    width: calc(100% - 20px);
}


@media only screen and (min-width: 400px) {

    .ctlg_teaser {
        width: calc(50% - 25px);
    }
}

@media only screen and (min-width: 800px) {

    .ctlg_teaser {
        width: calc(33.33% - 25px);
    }
}

HTML: 

<div class="ctlg_teaser block<?= $this->cssClass ?>">
  <div class="ctlg_entity">
    <a href="<?= $this->masterUrl ?>"></a>
    <?php if ($this->logo): ?>
      <div class="ctlg_entity_value">
        <?= $this->logo ?>
      </div>
    <?php endif; ?>
    <?php if ($this->name): ?>
      <h3><?= $this->name ?></h3>
    <?php endif; ?>
    <?php if ($this->branch): ?>
      <p><?= $this->branch ?></p>
    <?php endif; ?>
    <?php if ($this->masterUrl): ?>
      <a class="read_more" href="<?= $this->masterUrl ?>" title="<?= $this->title ?>">Mehr Details</a>
    <?php endif; ?>
  </div>
</div>

А JS: 

    /* Tiles Masonry*/
    $(document).ready(function() {
        var grid = $('.mod_catalogUniversalView.masonry_list').imagesLoaded(function() {
            grid.masonry({
                itemSelector: '.ctlg_teaser',
                percentPosition: true
            });
            $('.ctlg_teaser').css('opacity', '1');
        });
    });

Я также сделал CodePem , который воссоздает проблему!

Любой вклад очень важен! Спасибо!

1 Ответ

0 голосов
/ 27 февраля 2020

Я бы порекомендовал вам обернуть ваш .masonry__list в контейнер и переместить ваш стиль рамки и т. Д. c. от .masonry__list до контейнера .

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

См. Обновленный Codepen здесь, расширенный от вашего:

https://codepen.io/cosmiccommand/pen/LYVWKqK

.container {
    border: solid 10px red;
    position: relative;
    max-width: 1000px;
    margin: auto;
    padding: 10px;

  &, * {
    box-sizing: border-box;
  }
}

<div class="container">
    <div class="masonry__list">
        <!-- stuff -->
    </div>
</div>
...