html - CSS 能处理这种类似沙漏的情况吗？

我很难想出以下问题的解决方案。
让我先说明一下:

情况
我有 26 个元素(在这个例子中，一般来说数量是未知的..)但是一次只能看到 12 个..我还有一些导航元素(绿色框)

紫色框和绿色框的宽度是固定的，但紫色框的高度可以根据内容变化..

一切正常，我可以用 css 来完成。

我正在为我的元素使用一个无序列表( float 元素)并且我已经指定了前两个 <li>元素作为导航元素。第一个向左浮动，第二个向右浮动。一切正常，其余元素的流程在两个绿色元素之间进行。

问题
但是现在我需要将绿色元素放在第二行(如果这个概念有帮助的话，或者最后一行，因为只有两行)

我希望能够隐藏前 X 个元素并显示下一个 X 并且它们会自行落入位置..

重新表述这个问题，我能否以这样一种方式定位一些元素(绿色元素)来控制它们的位置，但仍然允许它们干扰来自新位置的流？

我希望这是清楚的。如果不问，我会提供尽可能多的信息。

我尝试过但没有用的东西

移动具有负下边距或正上边距的绿色元素。他们将离开他们的位置，但其他元素不会填补他们的位置。
使用绝对位置，但是元素从流中完全移除并且它们不影响其他元素，因此它们与其他元素重叠..

[灰色的元素是隐藏的，我只是展示它们让你知道它们存在..]

一些让您入门的代码

<style type="text/css">ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ul {
  width: 155px;
  position: relative;
  height: 125px;
  border: 1px solid red;
}

li {
  float: left;
  background-color: purple;
  margin-left: 5px;
  margin-top: 5px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  color: white;
}

.prev {
  color: black;
  background-color: green;
}

.next {
  color: black;
  float: right;
  margin-right: 5px;
  background-color: green;
}

</style>

<body>
  <ul>
    <li class="prev">&lt;</li>
    <li class="next">&gt;</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
  </ul>
</body>

最佳答案

好吧，显然这不能只用 Css/Html 来解决..

因此，为了解决这个问题，我使用了一些 CSS(使用 inline-block crossbrowser)和一些 jQuery 来移动导航按钮，以便它们始终保持在我想要的位置。

引用这里是解决方案..

function resetNextPrev() {
  $next.insertAfter('#performances li.shown:eq(' + ($perpage - 1) + ')');
  $prev.insertAfter('#performances li.shown:eq(' + ($perline - 1) + ')');
}
$(document).ready(function() {
  $perpage = 8;
  $perline = ($perpage + 2) / 2;
  $page = 1;
  $itemcount = $('#performances li.performance').length;
  $pages = Math.ceil($itemcount / $perpage);
  $next = $('#performances li.next');
  $prev = $('#performances li.prev');

  $('#performances li.performance').slice(0, $perpage).addClass('shown');

  if (($pages * $perpage) > $itemcount)
    for (var i = 0; i < ($pages * $perpage) - $itemcount; i++)
      $('<li class="performance placeholder">test</li>').appendTo('#performances');
  resetNextPrev();

  $('li.next').click(function() {
    if ($page < $pages)
      $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (++$page - 1), $perpage * $page).addClass('shown');
    resetNextPrev($perline);

  });
  $('li.prev').click(function() {
    if ($page > 1)
      $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (--$page - 1), $perpage * $page).addClass('shown');
    resetNextPrev($perline);

  });
});

<style type="text/css">ul,
li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

#performances {
  width: 155px;
  border: 1px solid red;
  line-height: 0;
  font-size: 0;
}

#performances li {
  font-size: 12px;
  background-color: purple;
  margin-left: 5px;
  margin-bottom: 5px;
  margin-top: 5px;
  width: 25px;
  text-align: center;
  line-height: 25px;
  color: white;
  display: none;
  vertical-align: top;
}

#performances .prev {
  color: black;
  background-color: green;
  display: -moz-inline-stack;
  display: inline-block;
}

#performances .next {
  color: black;
  background-color: green;
  display: -moz-inline-stack;
  display: inline-block;
}

#performances .shown {
  display: -moz-inline-stack;
  display: inline-block;
}

#performances .placeholder {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="performances">
  <li class="prev">&lt;</li>
  <li class="next">&gt;</li>
  <li class="performance">1</li>
  <li class="performance">2</li>
  <li class="performance">3</li>
  <li class="performance">4 dfs s sf</li>
  <li class="performance">5</li>
  <li class="performance">6</li>
  <li class="performance">7</li>
  <li class="performance">8</li>
  <li class="performance">9</li>
  <li class="performance">10</li>
  <li class="performance">11</li>
  <li class="performance">12</li>
  <li class="performance">13</li>
  <li class="performance">14</li>
  <li class="performance">15</li>
  <li class="performance">16</li>
  <li class="performance">17</li>
  <li class="performance">18</li>
  <li class="performance">19</li>
</ul>

里面有几个硬编码的值，但我会把它留给任何可能从中学到新东西的人......

感谢大家的指导:)

关于html - CSS 能处理这种类似沙漏的情况吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2096639/

html - CSS 能处理这种类似沙漏的情况吗？

上一篇：html - HTML 和 CSS 的空格和新行

下一篇：html - 我应该在我的网站上使用类似 sprite 的缩略图技术吗？