html - CSS，容器高度比预期的太小，有什么解决办法吗？

Question

我正在制作一个教育页面，我遇到了一个我无法真正弄清楚如何解决的问题。正如您在此处看到的：jsFiddle黄色框比左侧的蓝色边框大得多，我需要蓝色边框与黄色框（邮件示例）一直向下，就像左侧的橙色虚线边框一样。有没有办法用CSS, 和解决它HTML？

score 0 · Accepted Answer

您的代码中有大量错误。

您不能为超过 1 个元素提供相同的 ID: #col-2。

你给了一个 div 类.example，然后你给了它的子段落相同的类，所以你给了每个段落一个高度，所以父级取了那个高度，这就是为什么边框没有拉伸，因为这个元素只有32px height.

所以...

.example {
    /* background-image: url(../images/note_bg-line.jpg) repeat-y; */
    background-color: yellow;
}

然后给段落另一个具有32px height.

您指定了这样的段落...

<p class="p example"></p>

删除它p example并在 CSS 中使用它：

.example p {
        padding-top: 19px;
    padding-left: 70px;
    margin: -19px 0 0 0;
        height:32px;
}

score 0 · Accepted Answer

使用示例容器类的高度就可以了。当您希望它像橙色边框一样一直向下移动时，它可以height: 295px;工作。 http://jsfiddle.net/xbcBz/1/

.example-container {
    border-left: dotted 5px #2491F5;
    padding:5px;
    height: 295px;
}

2 回答 2