设置填充构件时砌体不起作用

Masonry not working when set elements padding

本文关键字：不起作用 填充 构件 设置      更新时间：2023-09-26

例如，当我将网格项的填充设置为8px（并调整宽度）时，即使元素的宽度小于页面的40%，它们也会堆叠在一列中。

html

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="grid-item"><span>1<br>blalbalblablablblab</span></div>
    <div class="grid-item"><span>2<br>blablabla blablalab blalbalb blalbalb</span></div>
    <div class="grid-item"><span>3<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores ducimus numquam, ullam natus dolores nulla veritatis optio voluptates cumque nostrum, assumenda est culpa, non placeat modi, necessitatibus illum. Consectetur, amet?</span></div>
    <div class="grid-item"><span>4<br>dsnfkjsanfkjsd sdjfnksdjn kasd<jnf</span></div>
    <div class="grid-item"><span>5<br>sadasdas</span></div>
    <div class="grid-item"><span>6<br>sadasdas</span></div>
    <div class="grid-item"><span>7<br>sadasdas</span></div>
    <div class="grid-item"><span>8<br>sadasdas</span></div>
    <div class="grid-item"><span>9<br>sadasdas</span></div>
</div>

css

    .grid {
        padding: 0;
        padding-left: 3px;
        width: 100%;
        margin: 0 auto;
    } 
    .grid-sizer,
      .grid-item { width: calc(50% - 8px); }
      .grid-item { background: #0A53D9; color: white; 
         border-radius: 2px; padding: 0px; margin-bottom: 4px; 
      }

js

var elem = document.querySelector('.grid');
    var iso = new Isotope(elem, {
        // options
        itemSelector: '.grid-item',
        percentPosition: true,
        // name: '.name',
        masonry: {
            columnWidth: '.grid-sizer',
            gutter: 8
            // isFitWidth: true
        }
        // ,
        // getSortData: {
        //     number: '.number',
        // },
        // sortBy: 'number',
        // sortAscending: true
    });

您是否尝试在.grid-item元素上使用box-sizing，以便填充不会影响宽度，而不是添加gutter:

.grid-item{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
相关文章：