CSS：根据文本大小调整块的高度

我想在我的文本周围创建一个别致的框架。最后，我将其包装在以下分区中：

____________________
|__________________|
| |  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>

，它确认文本的大小，但当我为leftDiv和rightDiv设置相同的参数时，它会忽略它-因为其中没有文本

有没有办法使leftDiv和rightDiv的高度与textDiv的高度相同

谢谢。

尝试更多嵌套：

<!-- (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>

你好，世界

它很凌乱，但会导致框架的所有元素随着文本的不断增加而增加。

尝试更多嵌套：

<!-- (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>

你好，世界

---

它是杂乱的，但它会导致框架的所有元素随着文本的不断增加而增长。

使用Jonathan的嵌套，应用以下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;
}

你到底想让你的框架看起来像什么？如果它很简单，代码可能会减少

---

编辑：Jonathan更新了他的帖子来解释这一点，使用Jonathan的嵌套，应用以下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;
}

你到底想让你的框架看起来像什么？如果它很简单，代码可能会减少

编辑：乔纳森更新了他的帖子来解释这一点