0

1190px 幅の親 div の子である必要がある子 div がありますが、子 div はブラウザ ウィンドウを拡大する必要があります。私はposition: absolute; left: 0; right: 0;これを達成するために使用しています。

問題は、div の下のコンテンツがボックス モデルに含まれなくなったため、絶対配置された div の下に重なることです。腹筋のマージンボトムを使用できます。配置されたdivですが、マージンを変更しなくても内部のテキストを増減できるという意味で動的である必要があります。

placeholder-divこれを解決できるかもしれないと読みました。どうすればいいのかわかりません。「position: relative」を使用して絶対配置された div の上に空の div を試しましたが、何もしませんでした。

HTML:

<div class="bonus-box">
   <div class="container">
      <span class="ribbon1"></span>
      <h3>Bonus Scoring System</h3>
      <div class="list1">
         <h4>Royalities for Back Hands</h4>
         <ul>
            <li><span>12 points for a Royal Flush</span></li>
            <li><span>7 points or Straight Flush</span></li>
            <li><span>4 points for Quads</span></li>
         </ul>
      </div>
      <div class="list2">
         <h4>Royalities for Middle Hands</h4>
         <ul>
            <li><span>24 points for a Royal Flush</span></li>
            <li><span>14 points or Straight Flush</span></li>
            <li><span>8 points for Quads</span></li>
            <li><span>2 points for Full House</span></li>
         </ul>
      </div>
      <div class="list3">
         <h4>Royalities for Front Hands</h4>
         <ul>
            <li><span>3 point for a Three of a Kind</span></li>
         </ul>
      </div>
   </div>
</div>
<!-- end bonus-box -->
<div class="placeholder-div"></div>
<h2>Special Conditions</h2>
<ul class="special-conditions">
   <li>
      <strong>1. Straights:</strong> You need to have straight in the back hand - middle hand and have your top front hand in sequence.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>2. Flushes:</strong> You need to have flushes in the back hand - middle hand and have your top front hand in the same suit.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>3. Six &amp; Half Pairs:</strong> You need to have six pairs in your hand. The last card can make three of a kind.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
   <li>
      <strong>4. 13 card wonder:</strong>If you have no pairs in your hand which means you have all cards from A - 2 you get a special bonus.
      <ol class="a-list">
         <li>Instant win and player wins 3 from everyone and voids all other hands.</li>
      </ol>
   </li>
</ul>
</div><!-- end content -->

CSS:

.bonus-box {
    background: #3f3f3f;
    overflow: hidden;
    width: 100%;
    position:absolute;
    left:0;
    right:0;
}
4

2 に答える 2