0

我正在开发一种包含各种大小的 div 的仪表板。高度和宽度目前是基于百分比的，每个 div 框的内容是动态的。我需要创建漂亮的标题来描述盒子的内容。

标题当前位于框内。当涉及溢出时，这会导致很多问题，并使内部内容的间距令人讨厌。

有没有一种更简单的方法可以在 div 内获得完美大小的标题，或者将它们像小帽子一样放在盒子的顶部会更容易。

这与我想要的非常接近，但标题会随着内容滚动！这真的很可怕。

创建带有标题标题的 div

为什么这么难？

这就是我想要的，一个像装置一样描述它自己的内容的小部件。

这是一个非常接近我想要的小提琴

http://jsfiddle.net/exrXR/1019/

但是 Position Absolute 完全覆盖了很多东西......

4

1 回答 1

2

在编辑问题以包含指向演示的链接之前，我将这个演示放在一起，所以这是第一次迭代，尽管在查看链接的演示之后，标记似乎相当接近：

<div class="dashWrap">
    <h2>header</h2>
    <div class="dashContent">
        <p><!-- content --></p>
    </div>
</div>​

以下 CSS 似乎可以满足您的要求：

.dashWrap {
    width: 50%;
    margin: 0 auto 1em auto;
}
.dashWrap h2 {
    background-color: #ffa;
    border: 2px solid #000;
    border-radius: 0.5em 0.5em 0 0;
    text-indent: 0.5em;
}

.dashWrap .dashContent {
    max-height: 5em;
    overflow-x: hidden;
    overflow-y: auto;
    border: 2px solid #000;
    border-top-color: transparent;
}​

JS 小提琴演示。

编辑了来自 OP 的以下问题（在评论中）：

...我不知道它为什么起作用。如果您愿意给我一个简短的解释，说明为什么标题如此神奇地保持在原位，那将非常有帮助。

保持“原位”的原因h2很简单，因为我没有移动它，也没有改变它的默认display行为（h2默认为display: block）；这意味着它保留在文档流中的位置。

它的兄弟.dashContent元素 , 元素能够滚动，因为它有两个规则，第一个是max-height防止元素垂直增长以容纳其后代元素，第二个是overflow-y（在某些浏览器中overflow-x也需要设置，因此上面），它允许.dashContent滚动的内容。

于 2012-06-04T14:15:44.553 回答