CSS：ブロックの高さをテキストのサイズに合わせて調整する

Question

テキストの周りに派手なフレームを作りたい。私は、次のdiv要素でラップになってしまった：

____________________ 
|__________________| 
| | Here will | | 
| | be some | | 
| |  text  | | 
| |  ...  | | 
|_|______________|_| 
|__________________| 

だからそれは、以下のブロックで構成されています。上部ブロック列の幅全体をとる（topDiv）。テキスト自体（textDiv）。フレームの左（leftDiv）と右（rightDiv）部分。 topDivと同じディメンションを持つボトムブロック（bottomDiv）。ここで

は私の意味は次のとおりです。

<div class="topDiv"> 
</div> 

<div class="mainDiv"> 
    <div class="leftDiv"> 
    </div> 

    <div class="textDiv"> 
     <? echo $myrow['maintext']; ?> 
    </div> 

    <div class="rightDiv"> 

    </div> 
</div> 

<div class="bottomDiv"> 
</div> 

問題は、私はtextDivについては、以下のパラメータを設定する場合ということです：

height: auto; 

を、それがテキストのサイズを認めるが、私は同じことを設定した場合leftDivとrightDivのパラメータでは、テキストは存在しないため、無視されます。

leftDivとrightDivの高さをtextDivの高さと同じにする方法はありますか？

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

Answer 1

は、より多くのネスティングを試してみてください。

<!-- (top of frame) has background on top --> 
<div class="top"> 
    <!-- (bottom of frame) has background on bottom --> 
    <div class="bottom"> 
    <!-- (left of frame) has background on left, margin on top/bottom --> 
    <div class="left"> 
     <!-- (right of frame) has background on right --> 
     <div class="right"> 
     <!-- (content area) margin on left and right --> 
     <div class="content"> 
      Hello World 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

それは雑然とだが、それはあなたのフレームのすべての要素があなたの右肩上がりのテキストと一緒に成長するようになります。ジョナサンのネスティングを使用して

Answer 2

、以下のCSS適用されます：あなたはあなたのフレームが見えるようにしたいんまさに

.top 
{ 
    padding-top: 10px; /*height of top image*/ 
    background: url(top.png) top repeat-x; 
} 

.bottom 
{ 
    padding-bottom: 10px; /*height of bottom image*/ 
    background: url(bottom.png) bottom repeat-x; 
} 

.left 
{ 
    padding-left: 10px; /*width of left image*/ 
    background: url(left.png) left repeat-y; 
} 

.right 
{ 
    padding-right: 10px; /*width of right image*/ 
    background: url(right.png) right repeat-y; 
} 

.content 
{ 
    width: 400px; 
    height: 400px; 
} 

を？シンプルであれば、おそらくコードを減らすことができます。

編集：ジョナサンはこの説明のために投稿を更新しました