0

リストを視覚的に形成する一連の投稿タイトルがあります。リストの行にカーソルを合わせると<div>、投稿コンテンツを含む が行の右端に表示され、フライアウト メニューのように動作します。このフライアウト<div>は行よりも高くなっています (ほとんどの場合)。その高さも可変なので、予測できません。

ここ を参照してください。一番下までスクロールします。

このフライアウト<div>は親の絶対右側に配置されるため、目的のフライアウト効果が得られます。

#schedule-section-containerしかし、リストの一番下までスクロールすると、最後の項目がの境界線の下端より下にあることがわかります。これを可能な限りクリーンな方法で修正したいと思います。

これはポジショニングのせいだと私は知っています。しかし、推測せずに同じフライアウト効果を達成できる方法はありmargin-bottomますか? フロートを使用したいのですが、フライアウト中にリストの高さを維持する方法がわかりません。

4

1 に答える 1

0

CSSだけでは少し難しいかもしれませんが、あなたが探しているのはこれだと思います：

.hentry:last-child > .entry-content { bottom: 0; }

これにより、最後の子が上部ではなく下部に配置され、コンテナーの境界を超えることなく目的の効果が得られます。最後のいくつかは実際には境界を少し超えているため、次のように :nth-last-child を試して最後からカウントすることもできます。

.hentry:nth-last-child(1) > .entry-content { bottom: 0; } /* This is last child */
.hentry:nth-last-child(2) > .entry-content { bottom: 0; } /* Second to last */
.hentry:nth-last-child(3) > .entry-content { bottom: 0; } /* Third to last, etc */

Wordpress はいくつかの場所で .henry を使用するため、このページだけに制限するために、最初にもう少し具体的な内容を追加する必要があるかもしれませんが、これは良い出発点になるはずです。また、古い IE のサポートが必要な場合は、Selectivzrの使用を検討してください。

于 2013-04-08T00:36:23.533 に答える