1

すべての li 要素を取得して、それらを含む ul 要素の高さ全体を占め、すべての li 要素の内容を下に揃えようとしています。

最初の部分を通過できません。li 要素の 1 つに画像があると、他の li 要素が同じ高さに拡張されません。

これが私のhtmlです

<nav id="sliderNav">
<ul id="sliderWrap">
      <li>wow 1</li>
      <li>wow2<br /> cool
      </li>
      <li>
          <img src="blank-trans.png" width="290" height="417" />
      </li>
      <div class="clearfloat"></div>
    </ul>
</nav>

私の単純なcssは

#sliderNav{
    text-align:center;
    background-color:#000;
}
#sliderNav ul{
    list-style:none;
    display:inline-block;
    background-color:#0F0;
    height:100%;
}
#sliderNav ul li{
    display:block;
    float:left;
    height:100%;
    background-color:#C3C;
}

私が得るものはこれです： 問題を示す画像

4

1 に答える 1

1

いくつかの問題:

  • 高さの設定:

親の高さが明示的に設定されていない場合、要素の高さを 100% に設定することはできません。

  • コンテンツを下に揃える:

コンテンツを下に揃える最良の方法は、絶対位置に配置されたコンテナーに入れ、「下」を「0」に設定することです。これにより、現在のマークアップが複雑になる可能性があるため...

私の解決策：

jQuery 経由 (または、任意のライブラリまたはプレーンな JavaScript を使用できます) すべての li をループして、最も高いものの高さを取得し、変数に格納します。

maxHeight = 0;
$("li").each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
})

最も高いものを取得したら、もう一度 li をループし、 maxHeight (最も高い li) - 現在の li の高さに等しいトップ パディングを設定します。これにより、すべてのリーが同じ高さになるだけでなく、コンテンツが自動的にリーの下部に揃えられます。

$("li").each(function() {
    $(this).css('padding-top', maxHeight - $(this).height() + 'px');
})

私はあなたのためにこれをいじりました：

http://jsfiddle.net/egrBV/2/

Li に右の境界線を追加したので、それらがどのように分割されているかがわかります。

それが役立つことを願っています

于 2012-07-18T01:02:38.717 に答える