0

私のslideToggle divが展開されると、コンテンツはそれを押し下げるのではなく、その下のdiv（.fragHeader）をオーバーレイします。拡大する div (.fragListMoreText) に (楽しみのために) 200 ピクセルの巨大な下マージンを追加し、.fragHeader はその位置にとどまり、その下の div (.fragNav) は適切に移動されました。問題のページへのリンクは次のとおりです (200px の余白を削除しました)。

http://mentalwarddesign.net/Andrea/Fragrances/baked.html

jQuery は正常に動作しているため、そのコードは含めませんが、関連する CSS は次のとおりです。

.fragListShowHide {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    line-height: 18px;
    font-weight: normal;
    color: #009b7b;
    width: 520px;
    height: 72px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
}
.fragListMoreText  {
    width: 520px;
    display: none;
    margin-left: -10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
}
.changeTextButtonFrag  {
    display: block;
    cursor: pointer;
    float: right;
    margin-right: -10px;
}

.fragHeader {
    background-color: #FFF;
    width: 528px;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 10px;
    margin-top: 30px;
    padding-bottom: 5px;
}
.fragNav {
    height: 116px;
    width: 543px;
    background-image: url(../Fragrances/imgFrag/navFragrance.jpg);
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -o-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    float: left;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

影響を受ける領域の html は次のとおりです。

      <div class="fragListShowHide" id="baked">ANGEL FOOD CAKE | APPLE CRISP | APPLE PIE | BAKED BREAD | BANANA CREAM PIE | BANANA NUT BREAD | BLUEBERRY CHEESECAKE | BLUEBERRY MUFFIN | BLUEBERRY PIE | CARROT CAKE | CHERRY COBBLER | CINNAMON BUNS | CINNAMON TOAST | COOKIE | DONUT | FUDGE BROWNIE | GINGERBREAD | GINGERSNAP | GRAHAM CRACKERS | KEY 
      <div class="fragListMoreText">LIME PIE | LEMON MERINGUE | NUT BREAD | NUT CAKE | PEACH COBBLER | PINEAPPLE UPSIDE DOWN CAKE | PLUM PUDDING | PUMPKIN PIE | SEX ON THE BEACH | SNICKER DOODLE | STRAWBERRY | CHEESECAKE | SUGAR COOKIE | VANILLA WAFER | WEDDING CAKE
       <!-- end .fragListMoreText --></div>
      <img src="../imgGlobal/more-button.png" width="51" height="16" class="changeTextButtonFrag" alt="textButton">
      <!-- end .fragListShowHide --></div>
   <div class="fragHeader">
        <h2>OUR FRAGRANCE CATEGORIES</h2>
        <p>Andrea Aromatics' custom fragrance categories are designed around familiar olfactory themes. With hundreds of individual fragrances overall, we cover practically every scent under the sun.</p>
      <!-- end .fragHeader --></div>
    <div class="fragNav" style="left: 101px; top: 265px;">
      <div class="fragNavRow1"><ul class="frag">
      <li class="chosenSub"><a href="../Fragrances/baked.html">Baked Goods</a></li>
      <li><a href="../Fragrances/floral.html">Florals</a></li>
      <li><a href="../Fragrances/nuts.html">Nuts</a></li>
      </ul>
      <!-- end .fragNavRow1 --></div>
      <div class="fragNavRow2"><ul class="frag">
      <li><a href="../Fragrances/beverage.html">Beverage</a></li>
      <li><a href="../Fragrances/fruit.html">Fruits</a></li>
      <li><a href="../Fragrances/outdoor.html">Outdoor</a></li>
      </ul>
      <!-- end .fragNavRow2 --></div>
      <div class="fragNavRow3"><ul class="frag">
      <li><a href="../Fragrances/designer.html">Designer</a></li>
      <li><a href="../Fragrances/holiday.html">Holiday</a></li>
      <li><a href="../Fragrances/spiceherb.html">Spice & Herb</a></li>
      </ul>
      <!-- end .fragNavRow3 --></div>
      <div class="fragNavRow4"><ul class="frag">
      <li><a href="../Fragrances/exotic.html">Exotic</a></li>
      <li><a href="../Fragrances/novelty.html">Novelty</a></li>
      <li><a href="../Fragrances/trees.html">Trees</a></li>
      </ul>
      <!-- end .fragNavRow3 --></div>
      <!-- end .fragNav --></div>

助けてくれてありがとう！

4

2 に答える 2

2

親要素の高さ（fragListShowHide）をハードコーディングしたので、ネストされた要素が表示されている場合でも、親コンテナdivの高さは72のままです。つまり、より大きなコンテンツに対応するために何も移動しません。

fragListShowHideから絶対的な高さを削除するか、fragListMoreTextを外側に移動します。

Firebugを使用すると、何が起こっているのかがはっきりとわかり、divのサイズを確認できます。

于 2012-11-30T21:54:15.713 に答える
2

わかりませんが、変更してみてください

.fragListShowHide {
   ....
   height: auto;
}

私は、それが役立つはずだと思います。

于 2012-11-30T21:41:49.207 に答える