html - 如何制作一个延伸到旁边两个 高度的 列？

Question

目标:在站点的内容区域中，我需要制作一个装饰性的专栏，它跨越它旁边的两个 div(包含图像)的高度。

问题:该列要么没有高度，无论我给它什么属性，要么只有第一个同级 div 的高度而没有填充。我试过高度:100%，最小高度:100%。还尝试将父位置设置为:绝对位置并设置顶部:0 和底部:0。

代码:

.row {
    position: relative;
    overflow: hidden;
    border: #000 3px dashed;
}
#colLeft {
    float: left;
    width: 15%;
    height: 100%;
    background-color: red;
}
#B1 {
    float: left;
    width: 84%;
    height: 100px;  /* this will actually be the height of the img */
    background-color: green;
 }
 #B2 {
     width: 84%;
     height: 100px;  /* this will actually be the height of the img */
     float: left;
     background-color: #ff0;
 }

    <div class="row">
        <div id="colLeft"></div>
        <div id="B1">
            <img src="foo">
        </div>
        <div id="B2">
            <img src="bar">
        </div>
</div>

预先感谢您的帮助。

我想要的:http://i.stack.imgur.com/sgr5g.png我得到的是:http://i.stack.imgur.com/lS63m.png

Answer 1

您应该将左侧列更改为 position: absolute。

.row {
    position: relative;
    overflow: hidden;
    border: #000 3px dashed;
}
#colLeft {
    float: left;
    width: 20%;
    position: absolute;
    height: 100%;
    background-color: red;
}
#B1 {
    float: right;
    width: 80%;
    height: 100px;
    background-color: green;
}
#B2 {
     width: 80%;
     height: 100px;
     float: right;
     background-color: #ff0;
}

<div class="row">
        <div id="colLeft"></div>
        <div id="B1">
            <img src="foo">
        </div>
        <div id="B2">
            <img src="bar">
        </div>
</div>