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>

它很混乱,但它会导致你的框架的所有元素随着你不断增加的文本而增长.