css 同位素等高行

qqrboqgw  于 2023-04-01  发布在  其他
关注(0)|答案(2)|浏览(96)

如何使同位素行具有相等的高度?下一列从正确的高度开始,但背景没有填充整个块。
我尝试了几个最小高度和高度的东西,如自动,继承,100%,100vh,...
这是我现在的项目,采用2x2网格块布局:它的特点是4块50vh和50vh...当内容大于块(50vh)时,块会增长,第二个块应该随之增长。

$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  layoutMode: 'fitRows',
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer'
  }
});

/*
var maxHeight = 0;

$(".grid-item").each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$(".grid-item").height(maxHeight);
*/
.grid-item {
  background: #0ba;
}

.grid-item:nth-child(2n+2) {
  background: #555;
}

.grid-item:nth-child(3n+3) {
  background: #e64;
}

.grid-item:nth-child(4n+4) {
  background: #00f;
}

.grid-item:nth-child(3n+5) {
  background: #9f5;
}

.grid {
  width: 100vw;
}

.grid-sizer,
.grid-item {
  width: 50vw;
}
.grid-item {
  min-height: 100vh;
}

@media only screen and (min-width: 1280px) {
  .grid-sizer,
  .grid-item {
    width: 50vw;
  }
  .grid-item {
    min-height: 50vh;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
<h1>Layout</h1>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item" style="font-size:40px;">Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
  <div class="grid-item">gdfgdf</div>
  <div class="grid-item">gfdg</div>
  <div class="grid-item">gfg</div>
</div>

先谢了
亲切的问候

nzk0hqpo

nzk0hqpo1#

我找到this commit : equal_height_fit-rows.js
1.修复了错别字,并在line 40上添加了一个) [edit] (minified file fixed here) [/edit]
1.加载isotope.pkgd.min.js
1.然后添加equalHeight:true作为fitRows选项:

var iso = new Isotope( listElem, {
          itemSelector: 'li',
          layoutMode: 'fitRows',
          fitRows: {
            equalheight: true
           }
        });
6ioyuze2

6ioyuze22#

我修改了我的最后一个答案。看看添加以下几行是否能解决您的问题。

.grid-item {
  bottom: 0;
}

x一个一个一个一个x一个一个二个一个x一个一个三个一个

相关问题