2012-03-02 7 views
2

私は、divに325pxの高さで12リンクのリストを持っています。 リストを垂直方向に均等に配分して、divボックスの高さ全体を塗りつぶす方法はありますか?垂直正当化のように。等間隔のリスト項目(垂直正当化)

325pxの高さになるように線の高さを指定しようとしましたが、数pxでオフになっています。

私はこれが明確であることを願っています...ありがとう!

EDIT

私はそれが次のようになりたい:http://jsfiddle.net/WwgSn/未満ダムコード付き!

+0

あなたがこれまで持っているかを示すことはできますか? http://jsfiddle.net/。 IE7をサポートする必要がありますか? – thirtydot

+0

私はこれを次のようにしたいと思う:http://jsfiddle.net/WwgSn/ リストはその隣にあるイメージと一直線に並ばなければならない。しかし、私がそれを働かせるための唯一の方法は、絶対的な位置付けと、実際には解決策ではない、行の高さの小数点値を使ってそれを偽造することです。線の高さ値を丸めたり上にしたりすると、数pxだけ外れてしまい、レイアウトが悪くなります。 ug。 –

答えて

0

リンクがどのように見えるかによって、多くのものが異なります。たとえば、12のリンクのそれぞれに背景色を設定しますか?あなたは、リンクにボーダーを持たせますか?リンクに背景や枠線(またはその両方)を設定したい場合は、リンクの高さを特定したいのですか?その間にスペースがありますか?

最も簡単な答えは、325を12で割ることです(27.0833333)。次に、高さと線の高さを<に設定します(27に切り捨てます)。ここで

は、それを単純にjsfiddleです:http://jsfiddle.net/tETcW/43/

あなたは、各<李上の特定の高さを設定したい場合は、私に教えてください>、正確なマージンの間の各<リーを考え出すための式>であります賢いトリッキー。

+0

私はあなたのjsfiddleの例を使って、div1ボックスの最上部にlink1を、divの下部にlink12を、すべてのリンクを均等に配置したいと思っています。リストの上部と下部の両方のテキストは、その隣の暗い灰色のボックスの上部と下部と同じ「レベル」になります。 私は現在、行の高さでこれを行う方法がないと考えています。別の方法でそれを偽造する必要があります。サイトデザインは非常にグリッドベースなので、小さなずれは非常に目立ちます。 –

+0

よく私はこのjsのfiddleを持っている:http://jsfiddle.net/tETcW/60/しかし、最後のリンクの下に多分1pxがある...私はそれよりもそれを得るために多くの時間を費やすつもりはない...もしあなたはそれを必要とし、各リンクのために絶対的または相対的な測位を使用して調べ、正確な座標を見つけるために数学を行います。またはあなたのためにそれを行うためにjavascriptを使用して – kdub

0

私は、liの高さを動的に設定するいくつかのJSをまとめました。それは、すべての計算され、親のdivsの高さの作品を意味します。

var foo = $(".parentDiv").height(), 
    bar = $("ul li"), 
    baz = foo/bar.length; 

bar.each(function(){ 
    $(this).height(baz); 
});​ 

http://jsfiddle.net/tETcW/65/