0

私は自分のウェブサイトにレスポンシブ スケルトン フレームワーク (ボイラープレート) を使用しています (ここから入手できます: http://www.getskeleton.com/ )。

<ul>高さの異なるリスト列があります。ネストされた列をクリアするには、CSS は、.clearfixクラスを親要素に配置する必要があると言います。

クラスを配置しようとしましたが、ネストされた列はクリアされません。リストアイテムを使用しているため、要素<ul>を配置したり、要素の中に入れたりすることはできません<ul>。

これに対する解決策はありますか？

私のhtmlコード:

    <ul class="container">
      <li class="one third columns alpha">a</li>
      <li class="one third columns">b</li>
      <li class="one third columns omega">c</li>
      <li class="two thirds columns alpha">d</li>
      <li class="one third columns omega">e</li>
    </ul>

Skeleton CSS では、最初の列の高さが 500px で、(d) と (e) の列を一番下/2 行目に移動するか、ネストされた列をクリアする必要があります。

別の行に移動するたびに別の行を空にすることを考えて<li class="clear"></li>いますが、それは機能しますが、別の解決策を探しています。空の追加よりも適切なもの<li>

ありがとうございました。

4

2 に答える 2

0

style='clear:both;'多くの場合、これは私の経験では「 clearfix class='clearfix'

」と呼ばれるクラスが単純に行っていることです (一般的な CSS プラクティス)。何らかの理由で、コードがスタイル シートでクラスを見つけられない可能性があるため、これは単なる推測/修正です。

于 2013-07-26T04:46:56.087 に答える
0

<ul>これらの要素で本当にこのルートに行きたい場合は、ネストされた 's でこれを行うことができると思います。

Skeleton では次のようになります。

<ul>

  <li class="six columns alpha clearfix">
    <ul class="container">
      <li class="one third columns">a</li>
      <li class="one third columns">b</li>
    </ul><!--.container-->
  </li><!--.clearfix-->

  <li class="six columns omega clearfix">
    <ul class="container">
      <li class="one third columns">c</li>
      <li class="one third columns">d</li>
      <li class="one third columns">e</li>
    </ul><!--.container-->
  </li><!--.clearfix-->

</ul>

私があなたの問題を正しく理解して取り組んだかどうか教えてください。ドキュメントのスケルトンの欠如によると.alpha、最初のネストされた行にクラスを追加.omegaし、2 番目のネストされた行にクラスを追加して繰り返す必要があります。

親要素<li class="six columns alpha clearfix">要素が.clearfix設定されていることがわかります。ネストされたリストを使用して、列 A と B を 1 行に、列 C、D と E を 2 行目に配置しています。

于 2013-07-26T07:03:23.047 に答える