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 回答