CSS：調整塊的高度，以文本

Question

的大小我要創建我的文本週圍看上框架。我結束了在以下的DIV包裹它：

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

所以由以下部分構成：上塊（topDiv），其採用列的整個寬度。文本本身（textDiv）。框架的左邊（leftDiv）和右邊（rightDiv）部分。和底部塊（bottomDiv）具有與topDiv相同的尺寸。

這裏就是我的意思是：

<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; 
} 

究竟是什麼，你希望你的框架是什麼樣子？如果很簡單，代碼可能會減少。

編輯：喬納森已經更新了他的職務，以解釋這個