1

これが可能かどうか、または正しいかどうかわからないので、本当にあなたの助けが必要です.

これは私のHTMLです

ご覧のとおり、<ul>複数<li>の が含まれています。そして、私の全体を複雑にしているのは、そこにあるという事実です<li class="wrapper year">。

これら<li>はすべて 4 列に並べて表示されます。clear次の行が水平方向に同じレベルになるように、4 番目の要素ごとに必要です。ただし、<li class="wrapper year">アイテムは常に必要であるため、この動作から除外されますclear:both。

まず、要素に「年」のカウントを含めるには、これが完璧な HTML 構造ではないことはわかっていますが<li>、バックグラウンドの CMS に基づいて、別の方法でこれを行うことはできない可能性があります。

これがCSSです

ul.event-items li:not(.year):nth-of-type(4n+1) { clear: right; }
ul.event-items li:not(.year):nth-of-type(4n+2) { clear: left; }

ここに問題のライブデモがあります

これはほとんど問題なく動作しますが、なぜ次のことが起こっているのかわかりません!

したがって、2012 年は 11 個のアイテムとして表示されるので、2011 年には 13 個のアイテムがあり、2010 年には 12 個のアイテムがあります。これらの項目は CMS に基づいているため、さまざまです。

2012 年と 2011 年では、フローティングとクリア (4 回ごとにli) は正常に機能しているように見えますが、2010 になると、この行の 2 番目の要素の後にクリアがあることがわかります。何故ですか？

4

2 に答える 2

2

残念ながら、このマークアップはあなたのデータには適していません。達成しようとしている結果は、マークアップに対する 2 つの異なるアプローチのいずれかです。

  1. ネストされた順序なしリストを作成する

    デモ

  2. 表を作成する 明らかに毎年、TH とタイトル、および 4 列の複数の行を含む別の表が必要です。

テーブルを使用して表形式のデータを表すことをためらわないでください。データが表形式ではなく、一覧表示されていると 100% 確信している場合は、データをより適切に表すために、一覧にさらに深みを与えます。

于 2012-10-04T08:47:14.480 に答える
0

セレクターが原因で発生しています：

ul.event-items li:not(.year):nth-of-type(4n+2) { clear: left; }

あなたは 2011 年に「孤児」になりました。したがって、2010 年の 3 番目の li は、実際には上記のルールの対象になります。できることはli、2011 年末に 2 つの「空白」を追加することです。

デモを確認してください(黄色のものは「空白」です)。必要に応じて非表示にすることができます (コンテナーと同じ背景色など)。

時間が経つにつれて、この構造はあなたに多くの問題を引き起こすと確信しています。多くの s に分割できない場合はul、少なくとも他のクラスとマーカーを使用してください...

linth-of-type でclearing をターゲットにする代わりに、それらにクラスを追加します (たとえば、 clear-left、実際には必要ありませんclear:right;)。html は少し「重く」なりますが、確実に安全になります。

なしで行う別の方法については、この更新されたデモを確認してください。nth-of-typeclear:right;

jQuery で clear-left を動的に追加する場合は、このデモを確認してください。

私が使用した機能は次のとおりです。

$('li.year').each(function(){
    $(this).nextAll('li').each(function(i){
        var li = $(this);
        /* break the loop when a new year is found */
        if(li.hasClass('year')) return false; 
        /* add clear-left to each 5th element */
        if( i > 0 && i % 4 == 0 ) li.addClass('clear-left');                      
    });
});​
于 2012-10-04T08:02:57.357 に答える