Question

我想为Ajax Load More插件创建一个非常网格，这个插件正在创建带有博客文章的ul li，我想用4个元素排成行，然后用3个元素排成行，然后一次又一次排成4和3个元素行。

我怎么能这样做，到目前为止在css我为李设置了25％的宽度。但是因为它是在ajax中加载我的js脚本与计数器不想工作。

请帮忙。

Answer 1

这样的东西？只需确保正确数量的帖子进入行。

＆＃13;

* {
  box-sizing: border-box;
}

ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

.row {
  display: flex;
  width: 100%;
}

.row:nth-child(odd) {
  background: red;
}

.row:nth-child(even) {
  background: blue;
}

.post {
  height: 50px;
  border: thin solid black;
}

.row:nth-child(odd) .post {
  width: 25%;
}

.row:nth-child(even) .post {
  width: 33%;
}

＆＃13;

<div class="container">
  <ul class="row">
    <li class="post">Post</li>
    <li class="post">Post</li>
    <li class="post">Post</li>
    <li class="post">Post</li>
  </ul>
  <ul class="row">
    <li class="post">Post</li>
    <li class="post">Post</li>
    <li class="post">Post</li>
  </ul>
  <ul class="row">
    <li class="post">Post</li>
    <li class="post">Post</li>
    <li class="post">Post</li>
    <li class="post">Post</li>
  </ul>
  <ul class="row">
    <li class="post">Post</li>
    <li class="post">Post</li>
    <li class="post">Post</li>
  </ul>
</div>

＆＃13;

Answer 2

您可能想探索使用ALM的PHP变量，以便可以根据项目在查询中的位置来定义其CSS类。使用类作为标记（断点），您可以更轻松地呈现异常行。

使用变量，您既可以获取查询项的总数，也可以获取整个查询中当前项的位置号，并且从理论上讲可以做到这一点。使用这些数据，除了使用一些全局PHP变量进行跟踪之外，您还可以识别每3个项目，然后每4个项目。

https://connekthq.com/plugins/ajax-load-more/docs/variables/

Wordrepss Ajax加载更多不正常的网格

2 个答案: