Divコンテナが子コンテンツの周囲にラップしない

Question

カスタムポップアップやツールチップに使用する「丸い角」コンテナを作成しています。オリジナル、コーナーのコンテンツとして丸められたpngを使って3x3テーブルを使用しました。

これらの丸められたpngは24x24で、内部コンテンツの瞬時に24pxマージンを強制する方法がわかります。私はDivsにマークアップをよりマージン/パディングの柔軟性のために変換したいです。

プロフェッショナルな表情の上に24pxのグラデーションが表示されます。私はDivのコンテナでほぼ完了していますが、私は厄介な切り株に反対しています！コンテナdivを動的に展開して子コンテンツを取り込むことはできません！これまでのところ私のコードです。あなたの分かりやすくするために、私は背景画像を削除し、それらを単純な背景色に置き換えました。

<div id="container" style="position: absolute; width: 200px; height: 100px;"> 
     <div id="topLeft" style="background-color: Aqua; position: absolute; width: 24px; 
      height: 24px; top: 0px; left: 0px;"> 
     </div> 
     <div id="topRight" style="background-color: Aqua; position: absolute; width: 24px; 
      height: 24px; top: 0px; right: 0px;"> 
     </div> 
     <div id="bottomLeft" style="background-color: Aqua; position: absolute; width: 24px; 
      height: 24px; bottom: 0px; left: 0px;"> 
     </div> 
     <div id="bottomRight" style="background-color: Aqua; position: absolute; width: 24px; 
      height: 24px; right: 0px; bottom: 0px"> 
     </div> 
     <div id="topFill" style="background-color: Lime; position: absolute; top: 0px; left: 24px; 
      right: 24px; height: 24px;"> 
     </div> 
     <div id="leftFill" style="background-color: Yellow; position: absolute; width: 24px; 
      left: 0px; bottom: 24px; top: 24px;"> 
     </div> 
     <div id="bottomFill" style="background-color: Lime; position: absolute; height: 24px; 
      bottom: 0px; left: 24px; right: 24px;"> 
     </div> 
     <div id="rightFill" style="background-color: Yellow; position: absolute; width: 24px; 
      top: 24px; right: 0px; bottom: 24px;"> 
     </div> 
     <div id="middleFill" style="background-color: Fuchsia; position: absolute; left: 24px; 
      right: 24px; top: 24px; bottom: 24px;"> 
     </div> 
     <div id="contentContainer" style="top: 0px; left: 0px; white-space: nowrap; position: absolute;"> 
      ALongStringOFTEXTThatDoesNotBreakToForceTestIfTheDivWillProperlyExpand 
     </div> 
    </div> 

私を混乱から追い出すことができる人に感謝します。ところで、この投稿は何時間もの研究と正気の喪失の後であった。 ;-)

Answer 1

コンテナの高さを100pxに固定しました。他の部門が示されていないのも不思議ではありません。 高さ：100ピクセルの部分を削除し、本当に必要な場合はオーバーフローを追加：非表示にして、コンテナが単独で高さを取得します。

Answer 2

あなたのすべてのdiv要素は、もはやオブジェクトフローの一部であり、この質問

how to wrap float div around absolute position divs?

をご覧ください。そのため、コンテナはそれらを囲んでいません。 私は同じ問題に直面しています。私は、コンテナの高さを手動で設定するためにJSに頼らなければならないと思います。

Answer 3

まず、カスケードスタイリングシート（CSS）の使用方法を学ぶ必要があります。これにより、100万以下の問題が発生し、さらに多くのことが可能になります。 cssを使用することに決めた場合は、画像のない親の角を丸めることもできますdiv！ Wooo！思うには狂っているのは分かっていますが、それは本当です。

私はあなたがする衰えまさに言うことができませんでしたが、あなたはこのような何かを試すことができます（HTML）スタイルのための今

<div class="wrapper"> 
    <div class="topR"> 

    </div> 
    <div class="topL"> 

    </div> 
    <div class="content"> 

    </div> 
    <div class="bottomR"> 

    </div> 
    <div class="bottomL"> 

    </div> 
</div> 

：（CSS）

.wrapper { 
margin: 0 auto; /* Centers the div */ 
border-radius: 4px 4px 0 0; /* this will round the top two corners of the main container */ 
background: #ffffff; 
width: 200px; 
} 

.topR{ 
float: right; 
background: #ffffff; 
width: 24px; 
} 

を

など。あなたがdiv class="wrapper">またはそれを固定した高さでこれらを保持するためのメインコンテナを持っているなら、それはうまくいくはずです。

いつでもoverflow: auto;を実行して、コンテナから出て行くものを隠し、そのdiv内のコンテンツをスローすることができます。

運が良ければ、私はあなたを手伝ってくれることを願っています。