Question

我正在制作一个教育页面，我遇到了一个我无法解决如何解决的问题。正如你在这里看到的那样：jsFiddle黄色框比左边的蓝色边框大得多，我需要蓝色边框一直向下用黄色框（邮件示例），就像虚线橙色边框在左边。有没有办法通过CSS和HTML解决问题？

Answer 1

使用example-container类的高度可以解决问题。正如您希望它一样向下移动，如橙色边框，height: 295px;可以正常工作。 http://jsfiddle.net/xbcBz/1/

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

Answer 2

您的代码中存在大量错误。

您不得为同一个ID提供超过1个元素：#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;
}