CSS可以處理這種類似沙漏的情況嗎？

我很難想出解決以下問題的方法。
讓我說明它首先CSS可以處理這種類似沙漏的情況嗎？

形勢
我有26個項目（在這個例子中，在一般的數量是不知道..），但只有12個可以在同一時間可見。我也有一些導航元素（綠色方框）

的紫色和綠色框寬度是固定的，但紫色高度可以根據內容而變化..

一切都很正常，我可以用CSS來做。

我正在爲我的項目使用無序列表（浮動項），並且我指定了前兩個<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>

來源

2010-01-19 Gaby aka G. Petrioli

你的語言非常好，但我還是不明白的問題呢。但作爲一般規則，如果'float：left'沒有幫助，那麼如果沒有一些Javascript，它可能無法解決。 – 2010-01-19 20:06:36

OK顯然這不能與只解決的CSS/HTML ..

因此，要解決這個問題，我使用了一些CSS（與inline-block的crossbrowser）和一些jQuery來左右移動導航按鈕所以他們留總是在我希望他們點..

僅供參考這裏是解決方案..

CSS

<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;} 
</style> 
<!--[if lte IE 7]><style> 
    #performances .prev,#performances .next,#performances .shown{zoom:1;*display:inline;} 
</style><![endif]-->

使用Javascript（jQuery的）

<script type="text/javascript"> 
    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); 

     }); 
    }); 
</script>

..和HTML

<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>

有一對夫婦裏面硬編碼值的，但我會離開它的人可能會挑從這個新的東西...

感謝所有的指導:)

工作實例（對誰希望看到它在行動）：http://www.jsfiddle.net/gaby/Ba3UT/

來源

2010-01-20 01:42:26

嘿加比，如果你在某個時候再次訪問這個Q--交叉瀏覽器的哪些部分內聯你最終使用了什麼？似乎有一些有效的評論提出了捷徑，缺點和替代方案（不包括表格評論：P）。我很想知道，如果你選擇堅持hax和你去了什麼程度...會真的很感激它：D – danjah 2010-12-23 09:45:21

@Danjah，我解決了這個答案。使用'inline-block'和IE技巧來模擬它。在http://www.jsfiddle.net/gaby/Ba3UT/上的工作示例 – 2010-12-26 12:14:59

它可能是值得的使用JavaScript的情況下，這個複雜的。像jQuery這樣的庫可以讓它變得非常輕鬆。在js中明確地定義這些包裝規則將比使用大量css規則隱式地進行維護更加清楚和容易。

來源

2010-01-19 20:01:50

:)通過這個問題的一半，我想過回答「不使用JQuery」。你打敗了我。儘管如此，我還沒有完全理解這個問題，並且有可能沒有Javascript。 – 2010-01-19 20:03:33

剛剛添加了一些起始代碼 – 2010-01-19 20:10:01

確定jquery是一種可能性..你是否建議我把所有事情都放到位置上：絕對計算並通過代碼對所有相關元素應用定位？ – 2010-01-19 20:46:41

沒有看到您的代碼我不能確定。但是，您是否嘗試將綠色元素放入標記中並將其標記爲明確：兩者都是？這可能會將它們移動到第三排。這是你應該結帳的東西。

來源

2010-01-19 20:04:43

代碼添加了，但導航元素是自己不是一個選項.. :( – 2010-01-19 20:09:12

使li除了導航的display: inline-block和也許移動導航li到列表的末尾？

來源

2010-01-19 20:19:16

讓我興奮了一會兒..問題是與左浮動的左箭頭，如果元素小於7那麼它將移動到該行..我希望它留在一起與最後一行右箭頭.. – 2010-01-19 20:37:27

此外，IE6無法正確處理它在這種情況下..它把箭頭放在他們自己的行（雖然如果它在其他瀏覽器上工作，我可以接受IE6的非兼容性..） – 2010-01-19 20:39:11

你沒有提到任何關於在你的問題少於7個項目!!：p你可以有一些'鬼元素'，使它始終大於7元素？這與'沙漏'有什麼關係？ – 2010-01-19 21:16:57

CSS可以處理這種類似沙漏的情況嗎？

回答

相關問題