html - CSS - 如何防止子元素增加其父元素的高度，而不是溢出？

Question

我正在使用 Bootstrap 3 并想创建这样的布局:

大红框是页面的大标题。我在这个框内有一个跨 8 列的措辞，然后是一个跨 4 列的边栏。我希望边栏在标题框中开始，然后溢出到页面的其余部分，如图所示。

目前的情况是，蓝色侧边栏反而增加了红色框的高度，因此红色框始终等于蓝色侧边栏的高度。

相反，我希望红色框等于其中文本的高度，并让蓝色框溢出红色框进入下面的页面。

这怎么可能，使用 Bootstrap 的网格系统和列？

Answer 1

两个实用的选择。

A) 为红色条设置一个高度固定高度

#redBar {
    height:250px;
    overflow:visible;
}

#blueBar {
    height:400px; /*or whatever*/
    float:right;
}

然后将蓝色条放在红色条内。

选项 B) 使用绝对位置。这不需要红色条具有固定高度!

#redBar{
    position:relative;
    overflow:visible;
    /*any other css you want*/
}


#blueBar {
    position:absolute;
    top: 0;
    right:0;

}

有任何问题欢迎提问