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

究竟是什么，你希望你的框架是什么样子？如果很简单，代码可能会减少。

编辑：乔纳森已经更新了他的职务，以解释这个