4

一貫した垂直リズム (整列されたベースライン) を持つ 2 列のレイアウトを構築しようとしています。この計算は非常に簡単で、うまく機能しています。私の質問はこれです：

テキストの 2 つの列が並んでいる場合、列の垂直余白が「行全体」でない場合、垂直のリズムを維持 (または回復) することは可能ですか?

この例では: http://jsfiddle.net/beejamin/PMCXt/リストとリスト項目の両方に「半分の行」の margin-bottom がある順序付けられていないリストがあります。リスト項目の数が偶数の場合、余白は行全体になり、リズムが保たれます (これは良いことです!)。ただし、奇数の場合、ベースラインは破棄され、再び参加することはできません (運が良く、別の奇数のリストが表示されない限り)。

リスト項目に行全体の余白を設定するのは (特に長いリストでは) 多すぎます。余白を設定しないのは十分ではありません。

これを回避/軽減できる方法はありますか? 行数は事前にわかりません。また、これに JavaScript を使用したくありません (再利用できる一般的なスキームを構築しようとしています)。

4

2 に答える 2

2

OK、これが純粋なCSSソリューションです。：nth-​​childおよび：last-childセレクターに依存しているため、これらのセレクターをサポートするブラウザーのみがそれを実行します。それは私にとっては十分です、それは本当にただの素晴らしい磨きであるからです。いくつかのjavascriptを使用して古いブラウザに適用するのも簡単です。

実例は次のとおりです：http：//jsfiddle.net/beejamin/DpSzW/

重要なのはこのセレクターです。

li:nth-child(odd):last-child { margin-bottom: 1.6em /* One full line */}

これにより、最後の子が奇数の子でもある場合は常に、リストの最後の子にフルラインのマージンが追加されます。フルラインマージンは、アイテムが通常持つであろうハーフラインを置き換えるので、垂直リズムが復元されます。基本的に、リストは常に整数行を占めるようになります。

リストに偶数の項目がある場合、セレクターは何もせず、すべてが良好な状態を保ちます。

于 2011-09-07T05:15:47.740 に答える
0

興味深い質問です！

すべての条件でテストしたわけではないため、100% 確実ではありませんが、これはうまくいくようです。

  1. 同じにしてくださいline-height。
  2. marginsと同じにしてくださいline-height。
  3. 同じにしてfont-sizeください。

例: http://jsfiddle.net/jasongennaro/PMCXt/1/

于 2011-09-06T13:53:50.453 に答える