CSSが継承しない継承

基本的に、ここに私の問題があります。このコンテナはrenderzoneの高さを適切に継承しません。それは同じままで、それは本当に悪化しています。 Renderzoneはユーザーのコンテンツに合わせて動的に成長し、chapter-list-thingの列がありたいので、コンテンツをラップすることはありません。CSSが継承しない継承

JSFiddle版 - http://jsfiddle.net/K2NPz/1/

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <div id="hidden" 
      style="visibility: visible; height: auto; "> 
      <div style="height: auto;"> 
       <div id="renderzone" 
        style="background-color: #bbe4e0; padding: 5px;"> 
        <div style=" min-height: 175px;height: inherit;float: left;overflow: auto;height: 100%;"> 
         <div id="chapterlist" 
          style="float: left; width: auto; height: auto; display: inline-block; border: 1px; border-style: solid; border-radius: 10px 0px 10px 0px; min-height: 140px; min-width: 150px; margin-right: 10px; margin-top: 10px; margin-left: 10px; padding: 10px; background-color: #B9D9F1;"> 
          <a href="#render1" 
           style="display: inline-block; padding-top: 8px; padding-bottom: 8px; color: #346460; font-size: 130%;" 
           id="anchor1">Header 1</a><br> 
         </div> 
         <img src="blank.jpg" alt="White Pixel"> 
        </div> 
        <div style="background-color: white; border-radius: 10px; margin: 10px; padding: 5px; margin-right: 20px; box-shadow: 10px 10px 5px #888;"> 
         <h1 id="render1" 
          name="render1" 
          class="renderh1">Header 1<br></h1> 
         <p id="render2" 
          name="render2" 
          class="renderp">Long text here...<br> 
         </p> 
         <img id="render3" 
          name="render3" 
          class="renderimg" 
          alt="Blank Pixel" 
          src="" 
          style="max-width: 400px;"><br> 
         <a href="#top">To Top</a> 
        </div> 
       </div> 
      </div> 
      <input type="button" value="??" id="sender"> 
      <input type="button" value="??" id="modoru"> 
     </div> 
    </body> 
</html>

出典

2011-10-21 Anonymous

。さらに、私のブラウザーのfind関数を使って、あなたのCSSに 'inherit'キーワードが全く見つからないことがあります。 – BoltClock

OPは、フロートの割り当てのために、達成されていないオートフローにコンテンツを保持しようとしていると思います。 – Marnix

すべてのインラインスタイルは申し訳ありません。それはhtml電子メールジェネレータのためのものなので、残念ながら外部のスタイルシートのインプレースを使用しなければなりません。また、私のコードが編集されました。 –

はoverflow:autoにあなたのスタイルを設定してみてください。あなたはそれを浮かべているので、それは範囲から外れます。オーバーフローで配置すると、スコープ内に戻ります。

出典

2011-10-21 17:30:46 Marnix

要素がフローティングかどうかは、その親要素からプロパティを継承する能力を変更しません。 – BoltClock

真実ですが、OPはコンテンツのサイズに対して自動ストレッチを話しています。スタイルプロパティからわかるように、継承する実際の高さプロパティはありません。 – Marnix

私はちょうどオーバーフロー編集を行い、doctypeなしで動作しますが、doctypeでは何らかの理由で失敗します。何か案は？ –

浮動要素は、中心のコンテンツの高さを知らないため、継承高さに問題があります。

最悪の方法：最後の子要素の後にfloatersを挿入divでクリアします（div <span class="clear"></span>の代わりにspanも使用できます）。

.main { 
 
    background-color: blue; 
 
    width: 200px; 
 
} 
 
.floated { 
 
    width: 250px; 
 
    height: 150px; 
 
    float: left; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="main"> 
 
    <div class="floated"></div> 
 
    <div class="floated"></div> 
 
    <div class="floated"></div> 
 
    <div class="clear"></div> 
 
</div>

より良い方法：からoverflow: hidden親のdivのために。

浮動小数点の要素を使用する場合、親divをクリアする必要があります。マージンが適切に機能し、面倒なhtml要素を生成しません。私は、水平スクロールバーを見てうんざり

.main { 
 
    background-color: blue; 
 
    width: 200px; 
 
    overflow: hidden 
 
} 
 
.floated { 
 
    width: 250px; 
 
    height: 150px; 
 
    float: left; 
 
}

<div class="main"> 
 
    <div class="floated"></div> 
 
    <div class="floated"></div> 
 
    <div class="floated"></div> 
 
</div>

出典

2014-11-20 12:58:42 user1597594

答えて

関連する問題