CSS:将块的高度调整为文本大小

时间:2009-07-05 19:04:24

标签: css

我想在文字周围创建一个奇特的框架。我最终将它包装在以下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的高度相同?

感谢。

2 个答案:

答案 0 :(得分:7)

尝试更多嵌套:

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

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

答案 1 :(得分:0)

使用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更新了他的帖子来解释这个